swiper.js 全屏轮播效果,可以触摸滑动,左右切换自动播放
  • 分享到微信朋友圈
    X

本文介绍如何使用swiper.js制作一个全屏轮播效果,可以触摸滑动,左右切换自动播放。Swiper是一款开源、免费、强大的触摸滑动插件,常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

主要js代码与说明

 <script>
    var swiper = new Swiper(".mySwiper", {
        autoplay:true,// 自动播放
        loop: true,// 循环模式选项
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletActiveClass: 'my-bullet-active',
        },  
    });
 </script>

更多关于Swiper

https://www.swiper.com.cn/api/index.html