swiper全屏响应式轮播图淡入淡出效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

如何实现

  • 步骤1：调用所需文件

  • 步骤2：创建 HTML 标记

  • 步骤3：初始化Swiper

关键js代码与解析

<script> 
  var swiper = new Swiper('.mySwiper', {
    //自动切换
    autoplay: {
  	delay: 5000,//自动切换的时间间隔，单位ms

    //disableOnInteraction用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
  	disableOnInteraction: false,
    },
    //切换速度，即slider自动滑动开始到结束的时间（单位ms）
    speed:500,
    //在slide之间设置距离（单位px）
    spaceBetween: 30,
    effect: 'fade',//设置Slide的切换效果fade淡入
    loop:true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      //分页器容器的css选择器或HTML标签。
      el: '.swiper-pagination',
      //clickable参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      clickable: true,
    },
    // 如果需要前进后退按钮
    navigation: {
      //设置前进按钮的css选择器或HTML元素
      nextEl: '.swiper-button-next',
      //设置后退按钮的css选择器或HTML元素。
      prevEl: '.swiper-button-prev',
    },
  }); 
</script>