在vue2项目中使用swiper和vue-awesome-swiper的详细步骤

效果图展示：

 swiper的使用应该是项目中必不可少的一个东西，不论做大屏/后台还是什么千奇百怪的项目，都会用到swiper。

swiper和vue-awesome-swiper的区别

swiper和vue-awesome-swiper都是用来实现轮播图功能的库

区别：

1.swiper：

• Swiper 是一个独立的 js库，用于创建各种类型的触摸滑块（slider）和幻灯片（slider）组件。它不依赖于任何框架，可以在任何支持 Jjs的网站或应用中使用。
• Swiper 提供了丰富的选项和配置，可以轻松地定制幻灯片的外观和行为。
• Swiper 是一个功能强大且灵活的库，支持多种轮播效果、分页器、导航按钮等功能。

2.vue-awesome-swiper

• 他首先肯定是swiper的基础上的一个vue.js的组件库，只是他将swiper封装成vue组件，以便于在vue.js的项目中轻松使用
• Vue-Awesome-Swiper 提供了一组 Vue 组件，使得在 Vue.js 应用中使用 Swiper 变得更加简单和直观。

 言而总之，总而言之，总体来说，如果是在一个普通的网站或者应用中使用swiper，可以直接用swiper库，但如果在开发一个vue项目的时候，想在其中使用swiper，那么可以使用vue-awesome-swiper。

ok，进入正题。

swiper在项目中使用：

1.安装 Swiper

这里我安装的是 swiper：5.4.5

首先，需要安装 Swiper 库。可以通过 npm 或 yarn 来安装

npm install swiper

或者

yarn add swiper

 2.引入swiper并导入swiper样式文件

在需要使用swiperVue 组件中引入 Swiper

import Swiper from "swiper"

同时，在项目中导入swiper的样式文件，以便正确的渲染swiper组件

import "swiper/css/swiper.min.css";

注意：

以前很多文章和可能博主没有更新的方法中这儿的引入都是很以前的方法，就会导致报错，一定要看清楚，引入的路径对不对。

 3.在 Vue 组件中使用 Swiper

现在就可以在需要的地方使用

在组件需要的地方：

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="@a/P.jpeg" alt="图片1" />
          <div class="slide-text">Slide 1</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/Q.jpeg" alt="图片2" />
          <div class="slide-text">Slide 2</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/R.jpg" alt="图片3" />
          <div class="slide-text">Slide 3</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/S.jpg" alt="图片4" />
          <div class="slide-text">Slide 4</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/T.jpg" alt="图片5" />
          <div class="slide-text">Slide 5</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/U.jpeg" alt="图片6" />
          <div class="slide-text">Slide 6</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/V.jpeg" alt="图片7" />
          <div class="slide-text">Slide 7</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/W.jpeg" alt="图片8" />
          <div class="slide-text">Slide 8</div>
        </div>
        <div class="swiper-slide">
          <img src="@a/X.jpeg" alt="图片9" />
          <div class="slide-text">Slide 9</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

但是不要忘了创建swiper 实例，在实例对象中配置swiper的属性。

this.swiper = new Swiper(".swiper-container", {
      slidesPerView: 5,
      spaceBetween: 20,
      loop: false,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

同时 ，一定要在mounted里面去执行，只有页面上轮播内容循环结束了，才可以初始化swiper

这儿，也可以将这个实例写在一个方法中。然后在mounted中执行。

最后我们可以在swiper在销毁之前做一些性能优化的操作，在销毁之前执行清理操作

  beforeDestroy() {
    if (this.swiper) {
      this.swiper.destroy();
      this.swiper = null;
    }
  },

这样一个简单的轮播图就做完了！

如下展示：

 如果想要自动轮播的话：

可以加一个配置项：

autoplay: { //自动开始
            delay: 1000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },

这就自动轮播了，可以根据自己的需求去设置这些配置项，这儿我就不多说了哦

还有一个挺重要的点，就是左右箭头切换的样式，在具体的项目中，一般都会设计一个漂亮箭头图片去进行切换，也是比较常用的。

将自定义的图片作为swiper的左右箭头

对，如上图  ，我现在要用这个做轮播图的样式，现在我已经把这个图片放在了assets文件中。

首先我们需要保证在我们的swiper中要有这两行代码

<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>

写在这个位置

同时要记得在配置项中写这个

 navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

接下来就是 把自己自定义的图片给放在该放的位置，

可以看到我在我左右箭头中加了一个“arrow”的类名

我打算把图片放在这里，通过这儿设置箭头的大小，左右翻转。以及调整左右位置，就可以简洁的设置箭头位置。

基本的思路就是这样的  ，让我们来看看具体的实现方式吧

.arrow {
  position: absolute;
  top: 45%;
  width: 53px;
  height: 62px;
  background: url("../assets/arrow_left.png") no-repeat left top;
  background-size: contain; /* 确保背景图片适应容器 */
}

.swiper-button-next {
  left: auto; /* 确保左箭头位置不固定 */
  right: 10px; /* 调整右箭头的位置 */
  transform: none; /* 确保右箭头方向正确 */
}

.swiper-button-prev {
  left: 10px; /* 调整左箭头的位置 */
  transform: rotate(-180deg); /* 确保左箭头方向正确 */
}

 这样基本就可以实现了。

下期写vue-awesome-swiper的详细步骤吧  ！