Swiper.js 漂亮的小巧的轮播图效果
  • 分享到微信朋友圈
    X

本文介绍如何使用swiper.js制作漂亮小巧的轮播图效果。Swiper - 一款开源、免费、强大的触摸滑动插件,常用于移动端网站的内容触摸滑动

参数说明

  • pagination:使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。

  • nextButton:用于指定前进按钮的CSS选择器或HTML元素。

  • prevButton:用于指定后退按钮的CSS选择器或HTML元素。

  • paginationClickable:此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。

  • spaceBetween:在slide之间设置距离(单位px)。

  • centeredSlides:居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。

  • loop:设置为 true 则开启循环(loop)模式。

  • autoplay:设置为true启动自动切换。

  • autoplayDisableOnInteraction:用户操作swiper之后,是否禁止autoplay。默认为true:停止。

主要js与解析

<script>
    var swiper = new Swiper('.proimg .swiper-container', {

        pagination: '.proimg .swiper-pagination',
        //使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。
        nextButton: '.proimg .swiper-button-next',
        //用于指定前进按钮的CSS选择器或HTML元素。
        prevButton: '.proimg .swiper-button-prev',
        //用于指定后退按钮的CSS选择器或HTML元素。
        paginationClickable: true,
        //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
        spaceBetween: 5,
        //在slide之间设置距离(单位px)。
        centeredSlides: true,
        //居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。
        loop: true,
        //设置为 true 则开启循环(loop)模式。
        autoplay: 3500,
        //设置为true启动自动切换。
        autoplayDisableOnInteraction: false
        //用户操作swiper之后,是否禁止autoplay。默认为true:停止。

    }); 
    </script>