使用swiper制作图片左右滚动效果自动播放
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于swiper

Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

为什么大家都选择使用Swiper?

  • 免费，开源，稳定，应用广泛，文档丰富，大量活跃用户解答疑问

  • Swiper应用广泛，使用频率仅次于jQuery，轮播图类排名第一，是网页设计师必备技能众多耳熟能详的品牌在使用:阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰...

  • 大量demo即下即用，前端新手亦可快捷做出精美效果

  • 据调查，掌握Swiper的前端开发者普遍月薪在1-3万之间

关键代码与说明

<script>

    var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
        prevButton: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
        paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        spaceBetween: 30, //slide之间的距离（单位px）。
        slidesPerView: 4, //设置slider容器能够同时显示的slides数量(carousel模式)。
        spaceBetween: 30, //slide之间的距离（单位px）。
        autoplay: 2500, //自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
        //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
        autoplayDisableOnInteraction: false,
        loop: true//设置为true 则开启loop模式。
    }); 
	
</script>
swiper
效果图