使用swiper轮播显示多张图片

最新推荐文章于 2024-05-13 20:53:38 发布

原创最新推荐文章于 2024-05-13 20:53:38 发布 · 7.8k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #jquery #轮播图

前端专栏收录该内容

11 篇文章

订阅专栏

效果如下:

css样式, 需要引入swiper的css和js文件

.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代码

<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>

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

代码

可以关注我的公众号：技术趣谈