vue中使用swiper6 vue-awesome-swiper

安装

npm i swiper vue-awesome-swiper

我这里安装的版本是是swiper6 swiper 各个版面都有些许配置上的区别 版本不同可能会出现某些控件不生效

局部引入

第一步 引入css 和swiper组件 同时在vue的components注册一下

import "swiper/swiper-bundle.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
//注册：
components: {
    Swiper,
    SwiperSlide,
  },

第二步 引入核心 swiper6 要引入SwiperCore核心
Navigation是导航模块 可以用来配置左右箭头的
后面的可以去官网看这里就不解释了需要哪个功能就要引入哪个
再用SwiperCore.use注册一下，

import SwiperCore, { Navigation, Pagination, Autoplay, Controller } from "swiper";
SwiperCore.use([Navigation, Pagination, Autoplay, Controller]);

第三步 页面使用swiper
imgListData1是要循环的列表
这里给大家推荐个网址 https://picsum.photos/ 有免费的随机图片 具体用法可以去官网看

ps:这里https://picsum.photos/id/232/200/300 232是图片的id用来确定唯一 不用id每次访问都是随机的图片 后面的200/300 是宽高
swiperOptionBottom是配置

<swiper
    ref="swiper2"
    @slideChange="secondChange"
    class="swiper"
   :options="swiperOptionBottom"
>
    <swiper-slide v-for="(item,i) in imgListData1" :key="item.id">
      <img :src="item.url" alt="" @click="controlTop(i)"/> 
    </swiper-slide>
</swiper>
// 放在swiper的外面  放在里面可能会不好使
   <div class="swiper-button-prev" slot="button-prev"></div>
   <div class="swiper-button-next" slot="button-next"></div>
data(){
return{
      imgListData1: [
        {
          url:"https://picsum.photos/id/232/200/300",
        },
        {
          url:"https://picsum.photos/id/233/200/300",
        },
        {
          url:"https://picsum.photos/id/234/200/300",
        },
        {
          url:"https://picsum.photos/id/235/200/300",
        },
     ],
     swiperOptionBottom: {
        slideToClickedSlide:true, //
        loop:true, //循环
        slidesPerView: 6, // 一页放多少个图片
        spaceBetween: 20, //每张图片的间距
        // autoplay: {  // 自动播放 要用的画需要引入Autoplay 在上面important的地方 还要use一下
        //   delay: 1500,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        speend: 1000, 
        direction: "horizontal", // 水平方向
        navigation: { // 左右两边的箭头 也要引入Navigation
          nextEl: ".swiper-button-next", // 左右按钮的class类名  
          prevEl: ".swiper-button-prev",
        },
        controller: {
          control: "",
        },
      },
  }
 }

controlTop是用来控制别的swiper的
下面的swiper滑动会改变上面swiper显示的图片 有需要的可以看看 没需求的话直接去掉img的click事件
这里注意要用this.$ refs.swiper1 ($ 后面有个空格 连在一起会被转义 用的时候自己去掉空格)还要在指向他下面的$ swiper 才可以使用slideTo（）
this.$refs.swiper1下面没有slideTo()方法
swiper1

<swiper
            ref="swiper1"
            @slideChange="firstChange"
            id="swiper-container1"
            class="swiper"
            :options="swiperOptionTop"
          >
            <swiper-slide v-for="item in imgListData1" :key="item.id">
              <img :src="item.url" alt="" />
            </swiper-slide>
          </swiper>

firstChange(val) {
      this.$refs.swiper2.$swiper.slideTo(val.realIndex, 500, true)
    },
    secondChange(val) {
      this.$refs.swiper1.$swiper.slideTo(val.realIndex, 500, true)
    },
    controlTop(i){
      this.$refs.swiper1.$swiper.slideTo(i, 500, true)
    }