昨天一个朋友要我在一个项目首页加一下某酒店网站的部分页面，主要难点是一些轮播图。看了html代码，不难判断是用的 swiper 插件。

这就去学下。

官网地址：https://www.swiper.com.cn/demo/index.html

这里举两个例子

一、一张轮播图、自动播放、循环

示例代码

<div class="swiper mySwiper1">
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/1.gif" alt=""></div>
        <span>XXXXXXX</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/2.gif" alt=""></div>
        <span>YYYYYY</span>
    </div>
</div>

<div>
    <img src="/assets/img/icon-left.png" alt="" class="prev-btn">
    <img src="/assets/img/icon-right.png" alt="" class="next-btn">
</div>

<script>
    var swiper = new Swiper(".mySwiper1", {
        initialSlide: 1,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        },
        navigation: {
            nextEl: ".next-btn",
            prevEl: ".prev-btn",
        },
    });
</script>

二、同时显示多张轮播图

示例代码

<div class="swiper mySwiper1">
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/1.png" alt=""></div>
        <span>XXXXXXX</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/2.png" alt=""></div>
        <span>YYYYYY</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/3.png" alt=""></div>
        <span>YYYYYY</span>
    </div>
</div>

<div>
    <img src="/assets/img/icon-left.png" alt="" class="prev-btn">
    <img src="/assets/img/icon-right.png" alt="" class="next-btn">
</div>

<script>
	var swiper = new Swiper(".mySwiper1", {
		initialSlide: 1,
		slidesPerView: 2,
		spaceBetween: 10,
		slidesPerGroup: 2,
		loop: true,
		loopFillGroupWithBlank: false,
		pagination: {
		    el: '.swiper-pagination',
		    clickable: true,
		},
		autoplay: {
		    delay: 3000,
		    disableOnInteraction: false
		},
		navigation: {
		    nextEl: ".next-btn",
		    nextEl: ".prev-btn"
		},
	});
</script>

三、效果图

经过一些css或者文字修改效果图如下

1、一次展示一张

2、同时展示多张