swiper小例子

1、下载 npm i swiper -S

2、添加swiper的css、js

　　　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

3、html样式

　　<div class="swiper-container">

　　　　<div class="swiper-wrapper">

　　　　　　<div class="swiper-slide"><img src="http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg" alt=""><p>123443322</p></div>

　　　　　　<div class="swiper-slide"><img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt=""><p>dadasdasdasd</p></div>

　　　　　　<div class="swiper-slide"><img src="http://img5.imgtn.bdimg.com/it/u=1046983545,2051560208&fm=27&gp=0.jpg" alt=""><p>阿斯打扫打扫打扫大大的</p></div>

　　　　</div>

　　　　<div class="swiper-button-prev"></div>

　　　　<div class="swiper-button-next"></div>

　　</div>

4、创建实例

　　var mySwiper = new Swiper ('.swiper-container', {

　　　　　　loop: true,

　　　　　　autoplay: {

　　　　　　delay: 1000,

　　　　　　disableOnInteraction: false

　　　　},

　　　　// 如果需要前进后退按钮

　　　　navigation: {

　　　　　　nextEl: '.swiper-button-next',

　　　　　　prevEl: '.swiper-button-prev',

　　　　}

　　})

　　mySwiper.el.onmouseover = function(){

　　　　mySwiper.autoplay.stop();

　　}

　　mySwiper.el.onmouseout = function(){

　　　　mySwiper.autoplay.start();

　　}

4、css样式

　　自己看着办(๑•̀ㅂ•́)و✧ 嘻嘻

5、详细请查看文档

　　http://www.swiper.com.cn/api/index.html

转载于:https://www.cnblogs.com/naxiaoming/p/8617616.html