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>