用原生JS打造Swiper滑块插件（上）原理解析与实战应用

前端

2023-12-13 15:26:07

滑块插件的初探

你好，我是芝麻。今天，让我们共同动手制作一个“滑块插件”。

那么，滑块插件究竟是什么？它能发挥什么作用呢？请看下图：

是不是有点眼熟？没错，它的基本功能就是左右滑动。只需几行简单的HTML和JS代码，插件使用者即可轻松实现一个简单的滑动效果。当然，你还可以组合各种元素，以适应不同的场景。

毕竟是插件嘛，就如同万金油一般，哪里需要往哪里搬。它广泛应用于轮播图、图片展示、产品展示等各种场景中。

Swiper，一款流行的滑块插件

在众多的滑块插件中，Swiper因其强大的功能和易用性而广受欢迎。它提供了多种自定义选项，可以轻松满足各种需求。

理解Swiper的原理

想要掌握Swiper，首先要理解它的原理。Swiper的实现主要依靠CSS3的transform属性。通过transform，我们可以对元素进行平移、缩放、旋转等操作。

在Swiper中，每个滑块都是一个div元素，它们被包裹在一个父容器中。父容器的宽度和高度就是滑块的总宽度和总高度。

当我们滑动滑块时，实际上是通过transform属性改变滑块的位置。例如，当我们向左滑动时，会将滑块向右移动一个滑块的宽度。

原生JS实现Swiper

现在，让我们用原生JS实现一个简单的Swiper。

首先，我们需要创建HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

然后，我们需要编写JS代码：

// 获取元素
const swiperContainer = document.querySelector('.swiper-container');
const swiperWrapper = document.querySelector('.swiper-wrapper');
const slides = document.querySelectorAll('.swiper-slide');

// 计算滑块的宽度
const slideWidth = swiperContainer.clientWidth;

// 滑块索引
let currentIndex = 0;

// 向左滑动
function slideLeft() {
  if (currentIndex > 0) {
    currentIndex--;
    swiperWrapper.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
  }
}

// 向右滑动
function slideRight() {
  if (currentIndex < slides.length - 1) {
    currentIndex++;
    swiperWrapper.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
  }
}

// 添加事件监听器
swiperContainer.addEventListener('click', function(event) {
  if (event.target.classList.contains('swiper-button-prev')) {
    slideLeft();
  } else if (event.target.classList.contains('swiper-button-next')) {
    slideRight();
  }
});