Question

和标题一样,我需要修改下一份和前文,并改写下台和前方滑坡,而不是眼看到的当前案文。

在我目前的幻灯片和我下台和前台的 but子中,我想看到案文、文字滑坡和文字滑坡。

const swiper = new Swiper( .swiper , {
loop: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl:  .next ,
prevEl:  .prev ,
},
on: {

  init: function() {
updateCaptionText(this);
  },
  activeIndexChange: function() {
updateCaptionText(this);
  }

}

});

let prev = document.querySelector( .prev );
let next = document.querySelector( .next );

function updateCaptionText(slider) {
    let prev_text = document.querySelector( .prev-text );
    let next_text = document.querySelector( .next-text );
    console.log(slider.slides[slider.realIndex - 1]);
    prev_text.innerHTML=slider.slides[slider.realIndex - 1].dataset.currentslide
    next_text.innerHTML=slider.slides[slider.realIndex + 1].dataset.currentslide
}

这是正在工作的超文本标记。


    <div class="swiper w-[50%]">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-currentslide="1">
          <div class="flex flex-1 items-start justify-center gap-5 min-h-full">
              <img src="//placehold.it/770x460" alt="" class="rounded-xl" >
          </div>
        </div>
        <div class="swiper-slide" data-currentslide="2">
          <div class="flex flex-1 items-start justify-center min-h-full">
              <img src="//placehold.it/770x460" alt="" class="rounded-xl" >
          </div>
        </div>
        <div class="swiper-slide" data-currentslide="3">
          <div class="flex flex-1 items-start justify-center min-h-full">
              <img src="//placehold.it/770x460" alt="" class="rounded-xl" >
          </div>
        </div>
        <div class="swiper-slide" data-currentslide="4">
          <div class="flex flex-1 items-start justify-center min-h-full">
              <img src="//placehold.it/770x460" alt="" class="rounded-xl" >
          </div>
        </div>
      </div>
      <div class="swiper-pagination left-[100px] bottom-40"></div>

    </div>

这是下游和Prevutton

<div class="">
      <div id="prev" data-prev="" class="bg-red-600 px-5 py-4 inline rounded-full prev"><
      </div>
      <span class="prev-text"> Test </span>
      <span class="next-text"> Test </span>
      <div id="next" data-next="" class="bg-red-600 px-5 py-4 inline rounded-full next"> ></div>
    </div>
  </div>

Answer 1

你似乎希望根据以往和以后的幻灯塔的数据属性,而不是目前的数据,更新前和下顿的案文。然而,在您目前的实施过程中,您重新使用了<条码>slider.realIndex - 1和slider.realIndex + 1,这些编号不一定总是给你正确的指数,因为时间选择。

In Swiper, when loop: true is set, duplicate slides are added to the start and end of the slides array. So, you need to account for these when accessing the slides array.

Here s a modified version of your updateCaptionText function that should work:

function updateCaptionText(slider) {
    let prev_text = document.querySelector( .prev-text );
    let next_text = document.querySelector( .next-text );

    let totalSlides = slider.slides.length;
    let realIndex = slider.realIndex;
    let prevIndex = (realIndex === 0) ? totalSlides - 3 : realIndex - 1;
    let nextIndex = (realIndex === totalSlides - 3) ? 0 : realIndex + 1;

    prev_text.innerHTML = slider.slides[prevIndex].dataset.currentslide;
    next_text.innerHTML = slider.slides[nextIndex].dataset.currentslide;
}

该代码计算了以往和以后的滑坡的正确指数,其中考虑到 lo的重复。然后更新<代码>prev_text 和next_text和上当前slide数据属性。请替换<代码>更新的CaptionText功能,并按预期运作。如果不需要,请删除<代码>console.log。

友情链接