swiper轮播：默认显示3张图片，中间显示全部两边显示部分

最新推荐文章于 2024-04-10 16:21:08 发布

Archer_yy

最新推荐文章于 2024-04-10 16:21:08 发布

阅读量7k

点赞数 1

本文链接：https://blog.csdn.net/Dilemma_me/article/details/105142032

版权

在这里插入图片描述
css:
记得引入swiper.css和swiper.js

 .swiper-container {
        margin-top: .1rem;
        width: 3.75rem;
        height: 2rem;
        overflow: visible !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide {
        width: 3.1rem;
        border-radius: 20px;
    }

    .swiper-container .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 2rem;
        border-radius: .1rem;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-prev img {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-next img {
        height: 2rem !important;
    }

    .swiper-container .swiper-wrapper .swiper-slide-active {
        width: 3.1rem;
    }

html:

<div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             <div class="swiper-slide"><img src="./img/time.jpg" /></div>
         </div>
     </div>

js:

<script src="./js/swiper.js"></script>
<script>
    window.onload = function () {
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            autoplay: 5000,
            slidesPerView: "auto",
            centeredSlides: true,
            spaceBetween: 10,
        })
    }
</script>