jQuery滑块-每张幻灯片的独特链接

我有一些jQuery滑块,每个幻灯片都应该有它自己独特的链接,但是无论是哪张幻灯片,它总是需要kast幻灯片的链接?例如,幻灯片1采用幻灯片2的链接,而幻灯片2应该有自己的链接。

如何将下面的代码更改为在每张幻灯片上都有唯一的链接?

Codepen

HTML

  <div class=slider-group>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>
    <div class="slider">
      <div class="slide active">
        <h2>Slide 1</h2>
        <a href="test1.com">Test 1</a>
      </div>
      <div class="slide">
        <h2>Slide 2</h2>
         <a href="test2.com">Test 2</a>
      </div>
    </div>
  </div>
  <div class=slider-group>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>
    <div class="slider">
      <div class="slide active">
        <h2>Slide 3</h2>
      </div>
      <div class="slide">
        <h2>Slide 4</h2>
      </div>
    </div>
  </div>

CSS

.slider-group {

}
.slider {
  width: 80%;
  height:500px;
  position: relative;
}

.slide {
  transition: opacity 500ms ease;
  position: absolute;
  opacity: 0;
}

.active {
  opacity: 1;
}

jQuery

    $(".slider-group").each(function(i, group) {
  var allSlides = $(".slide", group);
  var activeSlide = 0;

  setInterval(autoSlide, 4000);

  $(".slider-next", group).click(function() {
    if (activeSlide + 1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
  });
  $(".slider-prev", group).click(function() {
    if (activeSlide - 1 < 0) {
      allSlides.eq(0).removeClass("active");
      activeSlide = allSlides.length - 1;
      allSlides.eq(activeSlide).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide--;
      allSlides.eq(activeSlide).addClass("active");
    }
  });

  function autoSlide() {
    if (activeSlide + 1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
  }
});

转载请注明出处:http://www.lvguanye.net/article/20230526/1732763.html