import React,{Component} from 'react';
import './App.css';
import Swiper from "swiper"
import SwiperAnimation from '@cycjimmy/swiper-animation';
import "animate.css/animate.min.css";
export default class App extends Component{
componentDidMount() {
let swiperAnimation = new SwiperAnimation();
new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
on: {
init: function () {
swiperAnimation.init(this).animate();
},
slideChange: function () {
swiperAnimation.init(this).animate();
}
}
});
}
render() {
return (
<div className="swiper-container">
<div className="swiper-wrapper">
<div className=
swiper、animate.css在react中开发fullpage页面
最新推荐文章于 2024-05-14 09:52:19 发布
本文介绍了如何结合Swiper.js和Animate.css库,在React应用程序中创建富有动态效果的全屏滚动页面。通过Swiper实现平滑的页面滑动,利用Animate.css为内容添加过渡动画,提升用户体验。
摘要由CSDN通过智能技术生成