Swiper轮播图

更新时间：2020-06-15 00:19:47

更新说明：我把autoplay属性合起来了，切换时间属性是因为 之前写了两个autoplay 后面的把前面的覆盖了，所以没有效果我已经把两个合在一起了，这样子就不会出现失效的错误了

更新时间：2020-05-05 22:03:41

使用方法

导入swiper js和css

1

2

<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>

<script src="./js/swiper.js" type="text/javascript" charset="utf-8"></script>

以第一个轮播为列：

水平切换

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="swiper-container" id="case1">

    <div class="swiper-wrapper">

        <div class="swiper-slide"><img src="img/t1.png"></div>

        <div class="swiper-slide"><img src="img/t2.png"></div>

        <div class="swiper-slide"><img src="img/t4.png"></div>

    </div>

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>

    <div class="swiper-scrollbar"></div>

</div>

js内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var mySwiper = new Swiper('#case1', {

    autoplay: true, 

    initialSlide: 1, 

    speed: 2000, 

    autoplay: {

        delay: 3000

    },

    <!-- 分页器 -->

    pagination: {

        el: '.swiper-pagination',

        clickable: true,

    },

    <!-- 导航按钮 上一页下一页 -->

    navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

    },

    <!-- 滚动条 -->

    scrollbar: {

        el: '.swiper-scrollbar',

        hide: true,

    },

    autoplay: {

        disableOnInteraction: false,

    },

});

css内容：设置了一下宽高，居中显示

1

2

3

4

5

6

7

8

9

p{text-align: center;}

    img{ width: 43.75rem;

    height: 18.125rem;

}

.swiper-container{

    width: 43.75rem;

    height: 18.125rem;

    margin:0 auto;

}

PREVIOUS:

NEXT:

网址：Swiper轮播图 https://m.mxgxt.com/news/view/2069645

相关内容

龙井市明任网络有限公司
全屏百叶窗轮播图js
轮播图新闻
拼多多明星店铺轮播图样式是什么？怎么用？
拼多多明星店铺轮播图样式：如何有效提升点击率与转化率？
涡轮流量计接线图,涡轮流量计接线图解析与操作指南
企业歌曲轮播图
主播验资PK引争议，12轮验资每轮10万元
淘宝直播明星带货榜出炉！林依轮成全网明星主播TOP1
古龙经典《浣花洗剑录》今日首轮四星联播

随便看看