zxcc

swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高,

,不过还是能够用swiper本身的特性更改成无限循环的轮播的。

<!--HTML代码-->
<div class="course-banner-box">
    <div class="swiper-container">
        <div class="swiper-wrapper"> <!--四张轮播图-->
            <div class="swiper-slide slide1"></div>
            <div class="swiper-slide slide2"></div>
            <div class="swiper-slide slide3"></div>
            <div class="swiper-slide slide4"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="button-box">
            <div class="button"> <!--左右按钮-->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

        </div>

    </div>
</div>

<!--script代码-->

<script>
    var swiper = new Swiper(\'.swiper-container\', {
        pagination: \'.swiper-pagination\',//pagination分页器
        nextButton: \'.swiper-button-next\',//前进后退按钮
        prevButton: \'.swiper-button-prev\',
        paginationClickable: true,//参数设置为true时,点击分页器的指示点分页器会控制Swiper切换
        spaceBetween: 30,//slide之间的距离(单位px)。
        centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。
        loop : true,//复制多份循环(这里就是让轮播看起来是循环的,去掉这个就恢复了默认的swiper轮播)
        autoplay: 3000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
        autoplayDisableOnInteraction: false//点击后打断auto-play
    });
</script>

 

分类:

技术点:

相关文章:

  • 2021-08-23
  • 2021-06-04
  • 2022-12-23
  • 2021-11-26
  • 2021-12-30
  • 2021-05-25
  • 2021-05-28
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-02-08
  • 2021-11-27
  • 2021-12-20
  • 2021-06-14
相关资源
相似解决方案