slideTo 方法在 swiperjs 中不起作用 - nuxt-swiper 库

Question

我正在 nuxt 项目中使用

swiper.js

 制作一个滑块

(nuxt-swiper library)

，它有一个 

thumbnail gallery

并且我希望当我单击缩略图库中的任何照片（我的 Slideto 方法）时，顶部滑块更改为所需的幻灯片，但 swiper slipTo

(in my slideto method)

 方法不起作用。

<template>

                  <Swiper 
                    class="text-xs w-full h-[90%]"    
                    :modules="[SwiperEffectCreative]"    
                    :slides-per-view="1"   
                    grab-cursor  
                    :loop="true"
                    @swiper="onSwiper" >
                      <SwiperSlide v-for="(img, index) in images" :key='index'>
                        <img src="@/assets/images/products/p4.png" />
                      </SwiperSlide>

                  </Swiper>
                  <div class="flex flex-row w-full h-[10%] bg-blue-300">
                    <div v-for="(img, index) in images" :key='index' >
                      <img @click="slideto" src="@/assets/images/products/p4.png" class="w-20 h-full"/>
                    </div>
                  </div>
</template>



<script>
  export default{
    setup(){
      let swiper = null,
          images = ref(['image1','image2','image3']);
      

      let onSwiper = (swiper)=>{
        swiper= swiper;
      }

      let slideto = ()=>{
        swiper.slideTo(2);
      }

      return{
        swiper,
        images,
        slideto,
      }
    }
  }
</script>

Answer 1

我花了一周时间才找到这个。我想我们可以用它来访问方法。

https://swiperjs.com/swiper-api#method-swiper-slideTo

const swiper = document.querySelector('.swiper')?.swiper swiper.slideTo(索引)