其他分享
首页 > 其他分享> > swiper与SUI框架轮播图冲突解决

swiper与SUI框架轮播图冲突解决

作者：互联网

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()去掉。

我的个人博客,有空来坐坐

标签：初始化,container,轮播,SUI,init,swiper
来源： https://blog.csdn.net/weixin_29491885/article/details/100576475