Swiper4——全能的轮播插件

一、Swiper4的使用

Swiper是一款基于jQuery的移动端网页触摸滑动插件，可以无缝地自适应PC与移动端屏幕，可以任意方向，支持滑动，支持循环、自动播放，还支持触摸事件的分页容器，轻巧不到100K。随着web技术的不断发展，Swiper4作为一款高性能的移动端滑动插件受到了越来越多的关注。在使用上，Swiper4可以很简单地满足各种不同场景下的需要，不仅仅是轮播图，也可以应用于下拉刷新、上拉加载等多种场景。

下面是Swiper4的基本使用方法，可以看出使用非常简单：

   

    
    

        
     
Slide 1
     
        
     
Slide 2
     
        
     
Slide 3
     
    
    
    
    

    
    

    
    


   


<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

通过设置不同的配置参数，可以实现各种各样的效果。例如，可以设置分页容器、前进后退按钮的样式，控制轮播方向和自动播放等等。更多具体的使用方法可以查看官方文档。

二、Swiper4的reloop方法

Swiper4的reloop方法主要用于解决动态增加和删除slide后导致Swiper的一些状态或顺序出现问题。例如，在使用Vue等框架进行动态渲染时，往往会出现问题。这时，就需要使用reloop方法来使Swiper重新计算内部状态和重新渲染slide。

var swiper = new Swiper('.swiper-container', {
  // reloop方法
  observer: true,
  observeParents: true,
  on: {
    init: function () {
      this.slides.eq(0).addClass('swiper-slide-active');
    },
    transitionEnd: function () {
      var activeIndex = this.activeIndex,
      slides = this.slides,
      length = slides.length;
      for (var i = 0; i < length; i++) {
        slides.eq(i).removeClass('swiper-slide-active');
      }
      slides.eq(activeIndex).addClass('swiper-slide-active');
    }
  },
  loop: true,
});
swiper.reloop();

三、Swiper4跑马灯效果

Swiper4的跑马灯效果是Swiper自带的Marquee（跑马灯）插件，可以让轮播的元素像跑马灯一样循环滚动。在官方文档中，Marquee插件叫做Loop Mode with fade, Coverflow and Flip效果。除了跑马灯效果，还包括渐隐和卡片翻转两种效果。跑马灯效果的使用方法如下：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 30,
  loop: true,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  on: {
    slideChange: function () {
      console.log('slide changed');
    },
  }
});

四、Swiper4解决iframe问题

在前端开发中，有时会需要在Swiper中嵌入iframe（内嵌HTML文档的框架），这时就会遇到Swiper与iframe之间的交互问题。为了解决这个问题，Swiper4提供了一种解决方案，即使用nested属性。nested属性可以让Swiper在iframe中运行，并且保持Swiper的完整地位，而不会受到iframe的影响。

var swiper1 = new Swiper('.swiper-container1', {
    pagination: {
        el: '.swiper-pagination',
    },
    nested: true,
});

var swiper2 = new Swiper('.swiper-container2', {
    pagination: {
        el: '.swiper-pagination',
    },
});

五、Swiper4.5重新初始化

Swiper4.5版本提供了一种新的方法来重新初始化Swiper，即使用update方法。update方法可以在重置Swiper的大小、样式等属性时使用，比destroy方法更加方便快捷。

var swiper = new Swiper('.swiper-container', {
    loop: true,
    // ...
});

swiper.update();

六、Swiper4.1.1版本找不到CSS文件

在早期的Swiper版本中，有时会出现无法找到CSS文件的问题。这时可以尝试手动加载CSS文件来解决该问题。具体方法为使用link标签来引入CSS文件。

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">


<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

七、Swiper4监听鼠标滚轮事件

Swiper4提供了一个mousewheel事件，可以用于监听鼠标滚轮事件。mousewheel事件可以用于控制Swiper的滑动方向和速度，非常方便。

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  mousewheel: {
    invert: false,
  },
  // ...
});

八、Swiper4.5.1与echarts的结合

Swiper和echarts是两个非常流行的前端插件，它们的结合可以实现更加丰富的功能。下面是一个基于Swiper4.5.1和echarts的简单实现示例。这个例子展示了如何使用Swiper实现轮播，每屏为一个echarts的图表，可以随着Swiper的切换发生变化。

// HTML

   

  
    

    
     

      
      

    
     
    
     

      
      

    
     
  
    

  
  
    


   

// JS
// 初始化swiper
var swiper = new Swiper('.swiper-container', {
  speed: 1000,
  spaceBetween: 100,
  loop: true,
  observer: true,
  observeParents: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
  },
  mousewheel: true,
  keyboard: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 初始化echarts
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

// 填充数据，这里只是随便填的数据，实际使用可以根据项目需求填充具体内容
var option1 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

var option2 = {
  title: {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    left: 'left'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} 
{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'right',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

chart1.setOption(option1);
chart2.setOption(option2);

// 监听swiper事件，切换时重新绘制echarts图表
swiper.on('slideChangeTransitionEnd', function () {
  chart1.resize();
  chart2.resize();
});