CSS - ссылка на слайды карусели перейти в неправильное положение

Question

Я только что сделал карусель, используя какой-то модуль от моего друга.

Проблема в том, что после того, как я поместил ссылку <a> на каждый слайд, ссылка просто переходит на следующие слайды, не следуя порядку HTML.

Когда вы переключаетесь на слайд 2, сначала он показывает ссылку слайда 2 (ссылка 2), но примерно через 0,5 секунды он переходит на ссылку слайда 1 (ссылка 1). Так же, как на слайде 3 показана ссылка 3, а затем мгновенно перейдите к ссылке 2.

Есть идеи, что только что произошло?

Вы также можете запустить код здесь на Codepen: https://codepen.io/hanh2122011/pen/rbEmOw

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked + .carousel-item {
  position: static;
  opacity: 100;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-item a {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  color: #eaeaea;
  cursor: pointer;
  display: none;
  font-size: 50px;
  height: 20em;
  width: 10%;
  line-height: 20em;
  position: absolute;
  top: 46%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  z-index: 10;
  vertical-align: middle;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none;
}

.carousel-control.prev {
  position: absolute;
}

.carousel-control.next {
  right: 0%;
}


#i1:checked ~ .control-1,
#i2:checked ~ .control-2,
#i3:checked ~ .control-3 {
  display: block;
}

<div class="carousel">
  <div class="carousel-inner">

      <!-- slide 1 -->

      <input class="carousel-open" type="radio" id="i1" name="carousel" aria-hidden="true" hidden="" checked="checked">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link1.com">
          <img src="https://i.ibb.co/6W3MvYJ/slide1.png">



        </a>
      </div>

      <!-- slide 2 -->

      <input class="carousel-open" type="radio" id="i2" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link2.com">
          <img src="https://i.ibb.co/Qvtjrng/slide2.png">

        </a>
      </div>

      <!-- slide 3 -->

      <input class="carousel-open" type="radio" id="i3" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link3.com">
          <img src="https://i.ibb.co/WKVKtmm/slide3.png">
        </a>
      </div>

      <label for="i3" class="carousel-control prev control-1">‹</label>
      <label for="i2" class="carousel-control next control-1">›</label>
      <label for="i1" class="carousel-control prev control-2">‹</label>
      <label for="i3" class="carousel-control next control-2">›</label>
      <label for="i2" class="carousel-control prev control-3">‹</label>
      <label for="i1" class="carousel-control next control-3">›</label>

  </div>

Answer 1

Это проблема порядка наложения и может быть решена с помощью CSS отрицание и z-index.Для непроверенных (неактивных) элементов карусели мы будем применять отрицательный z-index, оставляя только ссылку активного элемента "сверху".Это позволит правильной ссылке быть доступной в нужное время.

Вот что я добавляю к вашим стилям:

.carousel-open:not(:checked)+.carousel-item {
  z-index: -1;
}

Демо

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 100;
}

.carousel-open:not(:checked)+.carousel-item {
  z-index: -1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-item a {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  color: #eaeaea;
  cursor: pointer;
  display: none;
  font-size: 50px;
  height: 20em;
  width: 10%;
  line-height: 20em;
  position: absolute;
  top: 46%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  z-index: 10;
  vertical-align: middle;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.carousel-control.prev {
  position: absolute;
}

.carousel-control.next {
  right: 0%;
}

#i1:checked~.control-1,
#i2:checked~.control-2,
#i3:checked~.control-3 {
  display: block;
}

<div class="carousel">
  <div class="carousel-inner">

    <!-- slide 1 -->

    <input class="carousel-open" type="radio" id="i1" name="carousel" aria-hidden="true" hidden="" checked="checked">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link1.com">
        <img src="https://i.ibb.co/6W3MvYJ/slide1.png">



      </a>
    </div>

    <!-- slide 2 -->

    <input class="carousel-open" type="radio" id="i2" name="carousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link2.com">
        <img src="https://i.ibb.co/Qvtjrng/slide2.png">

      </a>
    </div>

    <!-- slide 3 -->

    <input class="carousel-open" type="radio" id="i3" name="carousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link3.com">
        <img src="https://i.ibb.co/WKVKtmm/slide3.png">
      </a>
    </div>

    <label for="i3" class="carousel-control prev control-1">‹</label>
    <label for="i2" class="carousel-control next control-1">›</label>
    <label for="i1" class="carousel-control prev control-2">‹</label>
    <label for="i3" class="carousel-control next control-2">›</label>
    <label for="i2" class="carousel-control prev control-3">‹</label>
    <label for="i1" class="carousel-control next control-3">›</label>

  </div>
</div>