nuxt 使用swiper，缩略图轮播与主轮播相互关联

nuxt 使用swiper，缩略图轮播与主轮播相互关联

概述

nuxt 使用swiper，需要缩略图轮播与主轮播相互关联

效果图

nuxt 使用swiper，缩略图轮播与主轮播相互关联

核心配置

swiper版本

plugins下新建swiper.js，在nuxt.config.js的plugins数组内进行引用

// swiper.js

import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
    Vue.use(VueAwesomeSwiper, { css })
}

{
	src: "~/plugins/swiper",
	ssr: false
	},

参考api

完整代码

<!-- 展会精彩瞬间 -->
<template>
  <div>
    <div class="second wCenter">
      <!-- 缩略图 -->
      <div class="photoDetailPar" style="margin: 0 10%">
        <div class="swiper-container photoDetail-thumbs">
          <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="(bean, idx) in list" :key="idx">
              <img :src="bean.thumImage" width="100%" />
            </li>
          </ul>
        </div>
      </div>
      <br />
      <!-- 大图 -->
      <div class="photoDetailPar">
        <div class="swiper-container photoDetail" ref="photoDetail">
          <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="(bean, idx) in list" :key="idx">
              <img :src="bean.thumImage" width="100%" />
            </li>
          </ul>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: "front",
  data() {
    return {
      list: [],
      form: {},
      photoDetailThumbs: {},
      photoDetail: {},
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    initSwiper() {
      // 缩略图swiper
      const sumSlide = 6;
      this.photoDetailThumbs = new Swiper(
        ".photoDetailPar .swiper-container.photoDetail-thumbs",
        {
          spaceBetween: 10,
          slidesPerView: sumSlide,
          loop: true,
          freeMode: true,
          loopedSlides: sumSlide, //looped slides should be the same
          watchSlidesProgress: true,
          watchSlidesVisibility: true,
          observeParents: true,
          // slideToClickedSlide:true,
          onTap: (swiper) => {
            let idx = swiper.clickedIndex;
            this.photoDetail.slideTo(idx, 1000, false); //
            this.photoDetailThumbs.slideTo(idx, 1000, false); //
          },
        }
      );
      //   主轮播图
      this.photoDetail = new Swiper(
        ".photoDetailPar .swiper-container.photoDetail",
        {
          loopedSlides: sumSlide, //looped slides should be the same
          nextButton: ".photoDetailPar .swiper-button-next",
          prevButton: ".photoDetailPar .swiper-button-prev",
          watchSlidesProgress: true,
          watchSlidesVisibility: true,
          observeParents: true,
          loop: true,
          effect: "fade",
          speed: 350,
          fadeEffect: {
            crossFade: true,
          },
        }
      );
      this.photoDetail.params.control = this.photoDetailThumbs;
      this.photoDetailThumbs.params.control = this.photoDetail;
    },
    getListFun() {
      this.list = [
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524093809_x87oiuq04v.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524112415_4cbpnu2mxb.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524112609_h2tq0icg98.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524112821_7jygg9qm74.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524113008_wyrj21rq30.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210525143859_o85oa2wubp.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210525144000_scde3wp7jk.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524095038_j6ft7qwbj6.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524111009_ycl3si12es.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202009/20200928111726_5y01i68tx4.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202105/20210524095257_f5iaqxjufv.jpg",
        },
        {
          thumImage:
            "https://pc-file.highset.cn/1/image/public/202009/20200928111700_d2qmr9llu0.jpg",
        },
      ];
      setTimeout(() => {
        this.$nextTick(() => {
          this.initSwiper();
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.photoDetail-thumbs .swiper-slide {
  opacity: 0.5;
  &-active {
    opacity: 1;
  }
}
</style>

如果看了这篇文章，对您有帮助，麻烦点个赞或者评论收藏一下，您的肯定是我不断更新的动力。