swiper与SUI框架轮播图冲突解决
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link href="https://cdn.bootcss.com/Swiper/4.0.0-beta.2/css/swiper.min.css" rel="stylesheet"> <style> .swiper-container { width: 300px; height: 300px; } </style> </head> <body> <div class="page-group"> <div class="page page-current"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="../images/product1.png" width="100%"></div> <div class="swiper-slide"><img src="../images/card1.png" width="100%"></div> <div class="swiper-slide"><img src="../images/pk1.png" width="100%"></div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div> </div> </div> </div> <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script src="https://cdn.bootcss.com/Swiper/4.0.0-beta.2/js/swiper.min.js"></script> <script> $(function(){ // $.init(); }) $(function() { var mySwiper = new Swiper('.swiper-container', { loop: true, // 如果需要分页器 pagination: '.swiper-pagination', autoplay: 1000, autoplayDisableOnInteraction: false }) }) </script> </body> </html> 注意$.init();
轮播图会在你页面入口执行$.init()后自动初始化。或者你的轮播图是页面加载后异步加载的,那么需要手动初始化：var mySwiper = new Swiper('.swiper-container', {参数})
上面的意思也就是说
$.init()和手动初始化两者任选其一，如果两者都执行则会产生两个一模一样的轮播图，造成冲突。但是使用SUI框架习惯性会加上$.init()，这是很容易忽视的一点，所以一定要注意把$.init()去掉。
来源：51CTO
作者：躺在家里干活
链接：https://blog.csdn.net/weixin_29491885/article/details/100576475