使用swiper轮播显示多张图片


效果如下:

css样式, 需要引入swiper的css和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
30
31
32
33
34
35
36
37
.ying_sipder .swiper-container {
        margin-top: 50px;
        width: 100%;
        height: 300px;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide {
        width: 250px;
        border-radius: 20px;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide img {
        position: absolute;
        left: 120px;
        width: 100%;
        height: 250px;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide-prev {
        height: 250px !important;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide-prev img {
        height: 250px !important;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide-next {
        height: 250px !important;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide-next img {
        height: 250px !important;
    }

    .ying_sipder .swiper-container .swiper-wrapper .swiper-slide-active {
        width: 250px;
    }

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="ying_sipder">
            <div id="ying_sipder" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="width: 300px;">
                            <img src="./static/imgs/y1.jpg" alt="">
                        </div>
                        <div class="swiper-slide" style="width: 300px;">
                            <img src="./static/imgs/y2.jpg" alt="">
                        </div>
                        <div class="swiper-slide" style="width: 300px;">
                            <img src="./static/imgs/y3.jpg" alt="">
                        </div>
                        <div class="swiper-slide" style="width: 300px;">
                            <img src="./static/imgs/y4.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>

js

1
2
3
4
5
6
7
new Swiper("#ying_sipder", {
            direction: 'horizontal', //默认horizontal, 水平轮播
            autoplay: true,   //自动切换
            loop: true,  //循环
            slidesPerView: "auto",  //默认1, 同时显示的slides数量,auto 代表根据轮播图的宽度排列
            spaceBetween: 30, //轮播图之间的间距
        })

代码