Conflict Resolution between swiper and SUI Framework Roadcasting Map

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My life</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>
                    <!-- Paginator if required -->
                    <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,
            // Paginator if required
            pagination: '.swiper-pagination',
            autoplay: 1000,
            autoplayDisableOnInteraction: false
        })
    })
    </script>
  </body>
</html>

Note $. init();

The broadcast chart automatically initializes $.init() after your page entry. Or if your carousel is loaded asynchronously after page loading, you need to initialize it manually: var mySwiper = new Swiper('.swiper-container', {parameter})

The above meaning is to say that both $.init() and manual initialization are one of them. If both of them are executed, there will be two identical charts, causing conflicts. But it is easy to overlook the habit of adding $. init() to the SUI framework, so it is important to take care to remove $. init().

My personal blog. Come and sit down when you have time.

Posted by MichaelHe on Wed, 02 Oct 2019 20:00:56 -0700

Programmer Group

Conflict Resolution between swiper and SUI Framework Roadcasting Map

Code

Note $. init();

Hot Keywords