swiper插件 缩略图上下联动

469 阅读1分钟

引入正确的版本

npm install swiper@^5 vue-awesome-swiper@^4 --save

参考图片 image.png

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 data() {
    return {
      swiperOptionTop: {
        loopedSlides: 2, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        // loop: true,
        // loopedSlides: 2, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    }
  components: {
    Swiper,
    SwiperSlide,
  },
  mounted() {
    this.$nextTick(() => {
    //核心代码
      const swiperTop = this.$refs.swiperTop.$el.swiper
      const swiperThumbs = this.$refs.swiperThumbs.$el.swiper
      
      console.log(this.$refs)
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },

( 完整代码后期上传)

安装异常请先卸载swiper

npm uninstall swiper

或清除配置文件node_modules