轮播图首尾相连应该用哪个参数实现,另外手动拖动后,后续不再自动切换了?
来源:2-2 编程练习
技术为王2383098363
2019-09-18 23:36:45
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta> <title>Document</title> <link rel="stylesheet" href="swiper/swiper.min.css"> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } html,body,.swiper-container,.swiper-wrapper,.swiper-slide{ height: 100%; width: 100%; } .slide-pic01{ background: url(http://climg.mukewang.com/59f2f3c60001e51206000600.jpg) no-repeat; background-size:cover; } .slide-pic02{ background: url(http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg) no-repeat; background-size: cover; } .slide-pic03{ background: url(http://climg.mukewang.com/59f2f3fb0001725305000707.jpg) no-repeat; background-size: cover; } </style> <script src="js/flexible.js"></script> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide slide-pic01"></div> <div class="swiper-slide slide-pic02"> </div> <div class="swiper-slide slide-pic03"></div> </div> </div> <script src="swiper/swiper.min.js"></script> <script> var mySwiper=new Swiper('.swiper-container',{ autoplay: true, direction:'horizontal', speed:500, delay:2000 }) </script> </body> </html>
1回答
好帮手慕慕子
2019-09-19
同学你好,
loop参数, 可以实现轮播图首尾相连的效果
autoplayDisableOnInteraction参数为false, 可以实现手拖动离开后, 继续自动轮播
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题