vue3中使用swiper的方法及版本兼容问题

Vue3中Swiper7的使用方法

原创已于 2024-11-13 16:59:22 修改 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-11-12 18:10:07 首次发布

Swiper官方文档

https://swiper.com.cn/

前言

如果使用vue3开发尽量避免swiper6及以下版本(踩的坑很多)，我使用的swiper7.4.1

开发中vue总是会遇到版本兼容性问题，每次都要调半天，很头疼....废话不多说，直接上方法及代码。

1.首先安装swiper

npm install swiper@7.4.1 -S

yarn add swiper@7.4.1 -S

2.在页面组件中引入

//按需引入
import { Navigation, Pagination, A11y, Autoplay, Thumbs } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css/autoplay";

2-1 需要抛出各种各种样式

const modules = [Autoplay, Navigation, Pagination, A11y, Thumbs];

2-2 基础代码

 <div class="swiperbox">
    <div class="swiper-container">
      <swiper
        :slidesPerView="1"
        :spaceBetween="10"
        :loop="true"
        :centeredSlides="true"
        :autoplay="autoplayOptions"
        :navigation="true"
        :thumbs="{ swiper: thumbsSwiper }"
        :modules="modules"
        class="mainSwiper"
      >
        <swiper-slide v-for="item in state.images" :key="item.id">
          <img :src="item.src" alt="" />
        </swiper-slide>
      </swiper>
    </div>
 </div>

2-3 参数说明

slidesPerView	轮播图组件中每次显示的幻灯片数量
spaceBetween	滑块组件（Swiper）中每个滑块之间的间距
loop	是否开启循环(loop)模式
centeredSlides	是否居中幻灯片
autoplay	是否启动自动切换
navigation	前进后退按钮
thumbs	用于制作带缩略图的swiper

更多参数及api可参考官方文档

3.完整代码

<template>
  <div class="swiperbox">
    <div class="swiper-container">
      <swiper
        :slidesPerView="1"
        :spaceBetween="10"
        :loop="true"
        :centeredSlides="true"
        :autoplay="autoplayOptions"
        :navigation="true"
        :thumbs="{ swiper: thumbsSwiper }"
        :modules="modules"
        class="mainSwiper"
      >
        <swiper-slide v-for="item in state.images" :key="item.id">
          <img :src="item.src" alt="" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Navigation, Pagination, A11y, Autoplay, Thumbs } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css/autoplay";
const mainSwiper = ref(null);
const thumbsSwiper = ref(null);
const activeIndex = ref(1);
const modules = [Autoplay, Navigation, Pagination, A11y, Thumbs];
const autoplayOptions = ref({
  delay: 3000,//自动切换的时间间隔，单位ms
  stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
  disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
});

const state = reactive({
  images: [
    {
      id: 1,
      src: "https://ts1.cn.mm.bing.net/th/id/R-C.1d7122d74918319a0cc94eff2b870412?rik=dsaOP4X%2bD4vC7Q&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f201384105239%2f8.jpg&ehk=lnWFTxhKyLQmWGeKiv1oI2jRDUPoFgT4ocZcrXbaZXM%3d&risl=&pid=ImgRaw&r=0",
    },
    {
      id: 2,
      src: "https://ts1.cn.mm.bing.net/th/id/R-C.c2553800ddb1015c38246aecd165843c?rik=Y5qhhj7kuO39cg&riu=http%3a%2f%2fimg.1ppt.com%2fuploads%2fallimg%2f2010%2f1_201026214635_2.jpg&ehk=Cm6AeBW%2fCgIyGPPcOdSmqswQvN6d89ezbaUXPVaVuEg%3d&risl=&pid=ImgRaw&r=0",
    },
  ],
});

</script>
<style lang="less" scoped>
.swiperbox {
  height: 100vh;
  position: relative;
  background: black;
  .swiper-container {
    width: 100%;

    .mainSwiper {
      height: 800px;
      // 自定义分页箭头样式(左箭头)
      :deep(.swiper-button-prev) {
        color: #ffffff;
      }
      // 自定义分页箭头样式(右箭头)
      :deep(.swiper-button-next) {
        color: #ffffff;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}


</style>

效果截图

4.附加(缩略图及改变滑动方向)

4-1 如果想要使用缩略图，可使用api--Thumbs 与缩略Swiper联动

<template>
  <div class="swiperbox">
    <div class="swiper-container">
      <!-- 主图 Swiper -->
      <swiper
        :slidesPerView="1"
        :spaceBetween="10"
        :loop="true"
        :centeredSlides="true"
        :autoplay="autoplayOptions"
        :navigation="true"
        :thumbs="{ swiper: thumbsSwiper }"
        :modules="modules"
        class="mainSwiper"
      >
        <swiper-slide v-for="item in state.images" :key="item.id">
          <img :src="item.src" alt="" />
        </swiper-slide>
      </swiper>
    </div>

    <!-- 缩略图 Swiper -->
    <swiper
      @swiper="setThumbsSwiper" 
      :slidesPerView="2"
      :spaceBetween="10"
      :loop="false"
      :navigation="true"
      :pagination="true"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide v-for="item in state.images" :key="item.id">
        <img :src="item.src" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Navigation, Pagination, A11y, Autoplay, Thumbs } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css/autoplay";
const mainSwiper = ref(null);
const thumbsSwiper = ref(null);
const activeIndex = ref(1);
const modules = [Autoplay, Navigation, Pagination, A11y, Thumbs];
const autoplayOptions = ref({
  delay: 3000,//自动切换的时间间隔，单位ms
  stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
  disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
});

const state = reactive({
  images: [
    {
      id: 1,
      src: "https://ts1.cn.mm.bing.net/th/id/R-C.1d7122d74918319a0cc94eff2b870412?rik=dsaOP4X%2bD4vC7Q&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f201384105239%2f8.jpg&ehk=lnWFTxhKyLQmWGeKiv1oI2jRDUPoFgT4ocZcrXbaZXM%3d&risl=&pid=ImgRaw&r=0",
    },
    {
      id: 2,
      src: "https://ts1.cn.mm.bing.net/th/id/R-C.c2553800ddb1015c38246aecd165843c?rik=Y5qhhj7kuO39cg&riu=http%3a%2f%2fimg.1ppt.com%2fuploads%2fallimg%2f2010%2f1_201026214635_2.jpg&ehk=Cm6AeBW%2fCgIyGPPcOdSmqswQvN6d89ezbaUXPVaVuEg%3d&risl=&pid=ImgRaw&r=0",
    },
  ],
});

const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
</script>
<style lang="less" scoped>
.swiperbox {
  height: 100vh;
  position: relative;
  background: black;
  .swiper-container {
    width: 100%;

    .mainSwiper {
      height: 800px;
      // 自定义分页箭头样式(左箭头)
      :deep(.swiper-button-prev) {
        color: #ffffff;
      }
      // 自定义分页箭头样式(右箭头)
      :deep(.swiper-button-next) {
        color: #ffffff;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.mySwiper {
  width: 300px;
  margin: 10px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
  }

  .swiper-slide {
    opacity: 0.4;
  }
  .swiper-slide-thumb-active {
    opacity: 1;
  }
}
</style>

效果图

4-2 如果想要改动滑动的方向，可以设置direction属性

direction Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical

代码示例

 <swiper
        :slidesPerView="1"
        :spaceBetween="10"
        :loop="true"
        :centeredSlides="true"
        :autoplay="autoplayOptions"
        :navigation="true"
        :thumbs="{ swiper: thumbsSwiper }"
        :modules="modules"
        class="mainSwiper"
        :direction="'vertical'"
      >
        <swiper-slide v-for="item in state.images" :key="item.id">
          <img :src="item.src" alt="" />
        </swiper-slide>
      </swiper>