swiper踩过的哪些坑

最新推荐文章于 2024-04-02 11:15:50 发布

转载最新推荐文章于 2024-04-02 11:15:50 发布 · 742 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rainwater/p/11073096.html

文章标签：

#javascript #ViewUI

博主因轮播需求苦恼，发现Swiper插件实用但踩过不少坑。分享了几个使用问题及解决办法，如autoplay属性触摸后停止轮播，可将disableOnInteraction设为true；一行多个slide轮播切换时，建议用visibility: hidden代替display:none；匀速无缝轮播可设置delay为0等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，苦恼于各种轮播的需求，每个自己都要自己写，写的挺烦的。终于，在网上发现了swiper插件，发现还是挺实用的，但其中还是踩过了不少的坑，其中有不少都是很简单的问题，但到发现的时候都是花了不少时间，特此做个分享。

Banner轮播图1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>Swiper demo</title>
 6   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 7 
 8   <!-- Link Swiper's CSS -->
 9   <link rel="stylesheet" href="./css/swiper.min.css">
10 
11   <!-- Demo styles -->
12   <style>
13     html, body {
14       position: relative;
15       height: 100%;
16     }
17     body {
18       background: #eee;
19       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
20       font-size: 14px;
21       color:#000;
22       margin: 0;
23       padding: 0;
24     }
25     .swiper-container {
26       width: 100%;
27       height: 100%;
28       margin-left: auto;
29       margin-right: auto;
30     }
31     .swiper-slide {
32       text-align: center;
33       font-size: 18px;
34       background: #fff;
35 
36       /* Center slide text vertically */
37       display: -webkit-box;
38       display: -ms-flexbox;
39       display: -webkit-flex;
40       display: flex;
41       -webkit-box-pack: center;
42       -ms-flex-pack: center;
43       -webkit-justify-content: center;
44       justify-content: center;
45       -webkit-box-align: center;
46       -ms-flex-align: center;
47       -webkit-align-items: center;
48       align-items: center;
49     }
50   </style>
51 </head>
52 <body>
53   <!-- Swiper -->
54   <div class="swiper-container">
55     <div class="swiper-wrapper">
56       <div class="swiper-slide">Slide 1</div>
57       <div class="swiper-slide">Slide 2</div>
58       <div class="swiper-slide">Slide 3</div>
59       <div class="swiper-slide">Slide 4</div>
60       <div class="swiper-slide">Slide 5</div>
61       <div class="swiper-slide">Slide 6</div>
62       <div class="swiper-slide">Slide 7</div>
63       <div class="swiper-slide">Slide 8</div>
64       <div class="swiper-slide">Slide 9</div>
65       <div class="swiper-slide">Slide 10</div>
66     </div>
67     <!-- Add Pagination -->
68     <div class="swiper-pagination"></div>
69     <!-- Add Arrows -->
70     <div class="swiper-button-next"></div>
71     <div class="swiper-button-prev"></div>
72   </div>
73 
74   <!-- Swiper JS -->
75   <script src="./js/swiper.js"></script>
76 
77   <!-- Initialize Swiper -->
78   <script>
79     var swiper = new Swiper('.swiper-container', {
80       slidesPerView: 1,
81       spaceBetween: 30,
82       loop: true,
83       pagination: {
84         el: '.swiper-pagination',
85         clickable: true,
86       },
87     // 开启自动切换
88       autoplay: true,
89       navigation: {
90         nextEl: '.swiper-button-next',
91         prevEl: '.swiper-button-prev',
92       },
93     });
94   </script>
95 </body>
96 </html>

但是，这个autoplay属性有问题，在轮播中触摸滑动之后就不在轮播，这不是我想要的。于是，我看了api文档，发现disableOnInteraction为true,用户操作swiper之后，禁止autoplay

autoplay:true 等价于 
autoplay：{
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
}

一行多个slide轮播，tap切换 2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            margin: 0 auto;
        }

        .swiper-container {
            width: 500px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .tap {
            display: flex;
            justify-content: space-evenly;
        }

        .tap span {
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            background-color: white;
        }

        .hide {
            position: absolute;
            visibility: hidden;
            height: 0;
        }

        .show {
            color: #e5256e;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- Swiper -->
        <div class="tap">
            <span class="show">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div id="lunbo">
            <div class="img1">
                <div class="swiper-container img1-1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                        <div class="swiper-slide">Slide 4</div>
                        <div class="swiper-slide">Slide 5</div>
                        <div class="swiper-slide">Slide 6</div>
                        <div class="swiper-slide">Slide 7</div>
                        <div class="swiper-slide">Slide 8</div>
                        <div class="swiper-slide">Slide 9</div>
                        <div class="swiper-slide">Slide 10</div>
                    </div>
                </div>
            </div>
            <div class="img2 hide">
                <div class="swiper-container img2-1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Slide 21</div>
                        <div class="swiper-slide">Slide 22</div>
                        <div class="swiper-slide">Slide 23</div>
                        <div class="swiper-slide">Slide 24</div>
                        <div class="swiper-slide">Slide 25</div>
                        <div class="swiper-slide">Slide 26</div>
                        <div class="swiper-slide">Slide 27</div>
                        <div class="swiper-slide">Slide 28</div>
                        <div class="swiper-slide">Slide 29</div>
                        <div class="swiper-slide">Slide 210</div>
                    </div>
                </div>
            </div>
            <div class="img3 hide">
                <div class="swiper-container img3-1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Slide 31</div>
                        <div class="swiper-slide">Slide 32</div>
                        <div class="swiper-slide">Slide 33</div>
                        <div class="swiper-slide">Slide 34</div>
                        <div class="swiper-slide">Slide 35</div>
                        <div class="swiper-slide">Slide 36</div>
                        <div class="swiper-slide">Slide 37</div>
                        <div class="swiper-slide">Slide 38</div>
                        <div class="swiper-slide">Slide 39</div>
                        <div class="swiper-slide">Slide 310</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper1 = new Swiper('.img1-1', {
            slidesPerView: 3,
            spaceBetween: 30,
            loop: true,
            // 开启自动切换
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });

        var swiper2 = new Swiper('.img2-1', {
            slidesPerView: 3,
            spaceBetween: 30,
            loop: true,
            // 开启自动切换
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });

        var swiper3 = new Swiper('.img3-1', {
            slidesPerView: 3,
            spaceBetween: 30,
            loop: true,
            // 开启自动切换
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });

        $(".tap span").click(function () {
            var index = $(this).index();
            $("#lunbo").children("div").eq(index).removeClass("hide").siblings().addClass("hide");
            $(this).addClass("show").siblings().removeClass("show");
        })

    </script>
</body>

</html>

注意，切换多个轮播的时候，不要使用display:none，建议使用visibility: hidden。一开始使用了display:none，出现各种问题，样式变了，轮播失效，加了监视器也只是样式好了，轮播依旧失效。

匀速无缝轮播3

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="utf-8">
  5   <title>Swiper demo</title>
  6   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  7 
  8   <!-- Link Swiper's CSS -->
  9   <link rel="stylesheet" href="./css/swiper.min.css">
 10 
 11   <!-- Demo styles -->
 12   <style>
 13     html, body {
 14       position: relative;
 15       height: 100%;
 16     }
 17     body {
 18       background: #eee;
 19       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 20       font-size: 14px;
 21       color:#000;
 22       margin: 0;
 23       padding: 0;
 24     }
 25     .swiper-container {
 26       width: 100%;
 27       height: 100%;
 28       margin-left: auto;
 29       margin-right: auto;
 30     }
 31     .swiper-slide {
 32       text-align: center;
 33       font-size: 18px;
 34       background: #fff;
 35 
 36       /* Center slide text vertically */
 37       display: -webkit-box;
 38       display: -ms-flexbox;
 39       display: -webkit-flex;
 40       display: flex;
 41       -webkit-box-pack: center;
 42       -ms-flex-pack: center;
 43       -webkit-justify-content: center;
 44       justify-content: center;
 45       -webkit-box-align: center;
 46       -ms-flex-align: center;
 47       -webkit-align-items: center;
 48       align-items: center;
 49     }
 50 
 51     .swiper-container-free-mode>.swiper-wrapper {
 52         -webkit-transition-timing-function: linear;
 53         -moz-transition-timing-function: linear;
 54         -ms-transition-timing-function: linear;
 55         -o-transition-timing-function: linear;
 56         transition-timing-function: linear;
 57         margin: 0 auto;
 58    }
 59 
 60   </style>
 61 </head>
 62 <body>
 63   <!-- Swiper -->
 64   <div class="swiper-container">
 65     <div class="swiper-wrapper">
 66       <div class="swiper-slide">Slide 1</div>
 67       <div class="swiper-slide">Slide 2</div>
 68       <div class="swiper-slide">Slide 3</div>
 69       <div class="swiper-slide">Slide 4</div>
 70       <div class="swiper-slide">Slide 5</div>
 71       <div class="swiper-slide">Slide 6</div>
 72       <div class="swiper-slide">Slide 7</div>
 73       <div class="swiper-slide">Slide 8</div>
 74       <div class="swiper-slide">Slide 9</div>
 75       <div class="swiper-slide">Slide 10</div>
 76     </div>
 77     <!-- Add Pagination -->
 78     <div class="swiper-pagination"></div>
 79     <!-- Add Arrows -->
 80     <div class="swiper-button-next"></div>
 81     <div class="swiper-button-prev"></div>
 82   </div>
 83 
 84   <!-- Swiper JS -->
 85   <script src="./js/swiper.js"></script>
 86 
 87   <!-- Initialize Swiper -->
 88   <script>
 89     var swiper = new Swiper('.swiper-container', {
 90       slidesPerView: 3,
 91       spaceBetween: 30,
 92       loop: true,
 93       pagination: {
 94         el: '.swiper-pagination',
 95         clickable: true,
 96       },
 97       speed:2000,
 98       freeMode: true,
 99     // 开启自动切换
100       autoplay:{
101         delay: 0,
102         stopOnLastSlide: false,
103         disableOnInteraction: false,
104       },
105     });
106   </script>
107 </body>
108 </html>