swiper.js 滑块中的动态下一个和上一个元素答案

【问题标题】：Dynamic next and previous elements in swiper.js sliderswiper.js 滑块中的动态下一个和上一个元素
【发布时间】：2023-02-22 04:43:28
【问题描述】：

我用 swiper js 制作了以下滑块

<Swiper
    loop={true}
    slidesPerView={1.25}
    freeMode={true}
    centeredSlides={true}
    spaceBetween={30}
    keyboard={true}
    modules={[
      Keyboard,
      Navigation,
    ]}
    navigation={{
      nextEl: '.swiper-slide-next',
      prevEl: '.swiper-slide-prev',
    }}
    breakpoints={{
      1024: {
        slidesPerView: 2.125,
      },
      768: {
        slidesPerView: 1.5,
      },
    }}
    onSlideChange={(swiper) => {
      /******************************** 
        THIS DOESN'T WORKS 
      ********************************/
      swiper.navigation.nextEl = document.querySelector('.swiper-slide-next') as HTMLElement
      swiper.navigation.prevEl = document.querySelector('.swiper-slide-prev') as HTMLElement
    }}
  >
    {slides.map(slide => (
      <SwiperSlide key={slide.id}>
        ...
      </SwiperSlide>
    ))}
  </Swiper>

现在刷卡器自动分配和更新.swiper-slide-next（红色）和.swiper-slide-prev（绿色）类马上到预期的元素，但 swiper.navigation.nextEl 和 swiper.navigation.prevElHTML元素不更新。我尝试通过收听 onSlideChange 侦听器来更新它们，但这也不起作用。

我应该怎么办？任何帮助将不胜感激。

【问题讨论】：

您是否要显示自定义的下一个和上一个元素？或者只是一个默认样式。
@PeterK 我不是在寻找这些元素的样式，而是我希望这些元素分别指向动态的下一张和上一张幻灯片，而不是默认的静态右箭头和左箭头。

标签： javascript slider swiper.js

【解决方案1】：

来自 swiper js 文档：https://swiperjs.com/swiper-api#param-slideToClickedSlide：

我们有一个 slideToClickedSlide 属性，正是这个问题正在寻找的目的。

【讨论】：