javascript vue.js react.js es6 elementui swiper插件的使用方法

      2.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {     width: 600px;     height: 300px; } 

      3.初始化swiper

      4.如果作为CommonJs 或ES 模块引入

//CommonJs var Swiper = require('swiper');     var mySwiper = new Swiper('.swiper-container', { /* ... */ }); //ES import Swiper from 'swiper';     var mySwiper = new Swiper('.swiper-container', { /* ... */ });

实现以下效果

                                   Slide 1       Slide 2       Slide 3       Slide 4       Slide 5       Slide 6       Slide 7       Slide 8       Slide 9       Slide 10                                             

4. Swiper Animate的使用方法

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。此插件不适用于loop模式。

使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

    ...               ...          

2. 初始化时隐藏元素并在需要的时刻开始动画。

3. 在需要运动的元素上面增加类名  ani   ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp

swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s

swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

内容

可选效果可以参考 animate.css

5. 在常用框架中使用Swiper

在vue/react中使用Swiper:

安装 swiper

npm install swiper

用法：

swiper/react导出2个组件：Swiper和SwiperSlide：

 // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/swiper.scss'; export default () => {   return (      console.log('slide change')}       onSwiper={(swiper) => console.log(swiper)}     >       Slide 1       Slide 2       Slide 3       Slide 4       ...        ); };

 默认情况下，Swiper React使用Swiper的核心版本（没有任何其他模块）。如果要使用导航，分页和其他模块，则必须先安装它们。这是其他模块导入的列表：

Virtual -虚拟幻灯片模块

Keyboard -键盘控制模块

Mousewheel -鼠标滚轮控制模块

Navigation -导航模块

Pagination -分页模块

Scrollbar -滚动条模块

Parallax -视差模块

Zoom -缩放模块

Lazy -懒模块

Controller -控制器模块

A11y -辅助功能模块

History -历史记录导航模块

HashNavigation -哈希导航模块

Autoplay -自动播放模块

EffectFade -淡入淡出效果模块

EffectCube -立方体效果模块

EffectFlip -翻转效果模块

EffectCoverflow -Coverflow效果模块

Thumbs -拇指模块

// import Swiper core and required modules import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/swiper.scss'; import 'swiper/components/navigation/navigation.scss'; import 'swiper/components/pagination/pagination.scss'; import 'swiper/components/scrollbar/scrollbar.scss'; // install Swiper modules SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); export default () => {   return (      console.log(swiper)}       onSlideChange={() => console.log('slide change')}     >       Slide 1       Slide 2       Slide 3       Slide 4       ...        ); };

推荐阅读

 您阅读本篇文章共花了：