使用 swiper.js 创建带有图库缩略图的滑块 - nuxt-swiper

Question

我想在 nuxt 项目中使用 swiper.js 制作一个带有图库缩略图的滑块

(nuxt-swiper library)

这样当顶部滑块滑动时，缩略图也会发生变化，反之亦然。

我还为topswiper和thumbsswier设置了

controller

，但它不起作用

当我更改顶部幻灯片时，拇指滑动器不会发生任何变化，反之亦然

<template>
                <Swiper 
                    class="text-xs w-full h-[90%]"    
                    :modules="[SwiperController]"    
                    :slides-per-view="1" 
                    :loop="true"
                    :controller="{control:thumbsswiper}"  
                    @swiper="setTopSwiper">
                      <SwiperSlide v-for="(img, index) in images" :key='index'>
                        <img src="@/assets/images/products/p4.png" />
                      </SwiperSlide>

                  </Swiper>
                  <Swiper 
                    class="text-xs w-full bg-blue-500 h-[10%]"    
                    :modules="[SwiperController]"    
                    :slides-per-view="7"   
                    :controller="{control:topswiper}"
                    @swiper="setThumbsSwiper"
                    :slideToClickedSlide= "true"
                    :freeMode='true'>
                      <SwiperSlide v-for="(img, index) in images" :key='index' class="slide">
                        <img src="@/assets/images/products/p4.png" />
                      </SwiperSlide>

                    </Swiper>

</template>




<script>
  export default{
    setup(){
      let topswiper = null,
          thumbsswiper = null,
          images= ref(['images1','images2','images3',])

      let setTopSwiper = (swiper)=>{
        topswiper = swiper;
      }

      let setThumbsSwiper = (swiper)=>{
        thumbsswiper = swiper;
      }

      return{
        images,
        setTopSwiper,  
        setThumbsSwiper,
        topswiper,
        thumbsswiper      
      }
    }
  }
</script>

Answer 1

https://codesandbox.io/p/devbox/swiper-vue-thumbs-gallery-tlpzmp?file=%2Fsrc%2FApp.vue%3A108%2C1-112%2C9

希望，它会有所帮助!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!