Swiper.js——用一张轮播图，打造一个秀美幻境

轮播图是很多网站都必不可少的功能之一，可以有效地提升网站的视觉效果和交互性，而Swiper.js就是一个非常优秀的轮播图插件。它提供了丰富的轮播图效果、选项、API以及事件，为我们开发和维护轮播图提供了极大的便利。下面我们将从多个方面对Swiper.js做详细的阐述。

一、Swiper.js 清空

当我们需要对Swiper实例进行清空时，我们可以使用 destroy() 方法。该方法会移除Swiper的DOM元素，解绑所有事件和删除API中所有属性。


var mySwiper = new Swiper('.swiper-container', {
  // 选项
});
mySwiper.destroy(); // 在清空之前先销毁Swiper实例
document.querySelector('.swiper-container').innerHTML = ''; // 清空DOM元素

二、Swiper-Item

在Swiper的轮播图中，每个轮播项都是一个swiper-item元素。我们可以通过Swiper提供的配置项来自定义轮播项的样式，如宽度、高度、颜色等等。同时，我们也可以通过给轮播项添加自定义的类名来实现对每个轮播项进行不同的样式控制。


var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 3, // 一次轮播3个项
  spaceBetween: 30, // 项之间的间隔
  centeredSlides: true, // 当前项居中
  loop: true, // 环形循环
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

三、Swiper.js环形循环

Swiper提供了 loop: true 配置项，可以让轮播图形成环形循环，图片可以一直向左或者向右循环轮播，视觉效果比较不错。


var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 环形循环
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

四、Swiper.js 3D画廊动效

Swiper提供了很多不同的轮播动画效果，其中3D画廊效果是比较炫酷的一种效果。我们可以通过给Swiper添加自定义的类名来启用这种效果，具体配置可参考Swiper的API。


var mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow', // 3D画廊效果
  grabCursor: true, // 开启抓手鼠标样式
  centeredSlides: true, // 当前项居中
  slidesPerView: 'auto', // 自由模式
  coverflowEffect: {
    rotate: 30, // 旋转角度
    stretch: 10, // 拉伸
    depth: 60, // 每个item之间的距离
    modifier: 2, // 3D样式的密集度
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

五、Swipe

Swiper提供了非常良好的触摸滑动体验，适用于移动端和PC端。我们可以使用手指滑动屏幕的方式来轮播图片，同时也支持PC鼠标拖动实现轮播。


var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 垂直方向滑动
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  mousewheel: true, // PC端支持滚轮控制轮播
});

六、Swiper.js 添加自定义类

我们可以通过Swiper提供的回调函数来实现轮播项的自定义样式控制。例如，在 onSlideChangeStart 回调函数中，我们可以获取到当前轮播项的索引，并添加自定义的类名来实现对当前轮播项的样式控制。


var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  on: {
    slideChangeStart: function () {
      var index = this.activeIndex;
      var prevIndex = this.previousIndex;
      // 删除前一个轮播项的自定义类
      this.slides.eq(prevIndex).removeClass('active');
      // 给当前轮播项添加自定义类
      this.slides.eq(index).addClass('active');
    },
  },
});

七、Swiper.js iOS会自动刷新页面

在iOS系统中，当我们在Swiper容器中使用了手势事件（例如光标和滑动），容器所在的页面可能会在手势结束后自动触发刷新。为了避免这种情况，我们需要禁用默认的滚动行为，具体实现方法如下：


var container = document.querySelector('.swiper-container');
container.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, false);

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Swiper.js作为一款轻量级的前端轮播插件，它不仅提供了丰富的轮播效果和选项，还提供了非常完善的API和事件，方便我们进行轮播的开发和维护。我们可以根据实际需求来选择我们需要的配置项和动画效果，打造一个视觉效果出众、交互性强的轮播图，从而提高网站的用户体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/272193.html