Как в CSS реализовать переключение input radio по ссылке?

Question

Нужно чтобы при нажатии на ❮ переключалось на предыдущий, без использования JavaScript

/*...*/

#slide1:checked~.slider>.slide1,
#slide2:checked~.slider>.slide2,
#slide3:checked~.slider>.slide3 {
  opacity: 1;
  z-index: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

<div class="wrapper">
  <input type="radio" name="point" id="slide1" checked>
  <input type="radio" name="point" id="slide2">
  <input type="radio" name="point" id="slide3">

  <div class="slider">
    <a class="prev">&#10094;</a>
    <div class="slides slide1"><img src="img/1.png"></div>
    <div class="slides slide2"><img src="img/2.png"></div>
    <div class="slides slide3"><img src="img/3.png"></div>
    <a class="next">&#10095;</a>
  </div>

  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

Answer 1

В данном случае, чтобы обойтись без использования скриптов, необходимо "утяжелить" разметку дополнительными тегами <label>:

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
[name="point"] {
  display: none;
}
.slider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slides {
  display: none;
  align-items: center;
  justify-content: center;
  height: 160px;
}
.slides > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slider label {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: inset 0 0 5px #000;
  cursor: pointer;
  user-select: none;
}
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding-top: 0.5em;
}
.dots > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 2px 1px #00f;
  cursor: pointer;
}
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4 {
  display: flex;
}
#slide1:checked ~ .dots > .slide1,
#slide2:checked ~ .dots > .slide2,
#slide3:checked ~ .dots > .slide3,
#slide4:checked ~ .dots > .slide4 {
  box-shadow: inset 0 0 2px 1px #00f, inset 0 0 1px 4px #fff, inset 0 0 0px 8px #00f;
}

.slides:first-child > label:first-of-type,
.slides:last-child > label:last-of-type {
  color: transparent;
  pointer-events: none;
}

<div class="wrapper">
  <input type="radio" name="point" id="slide1" checked>
  <input type="radio" name="point" id="slide2">
  <input type="radio" name="point" id="slide3">
  <input type="radio" name="point" id="slide4">

  <div class="slider">
    <div class="slides slide1">
      <label for="slide0">&#10094;</label>
      <img src="https://i.stack.imgur.com/MraLT.jpg" alt="red wall">
      <label for="slide2">&#10095;</label>
    </div>
    <div class="slides slide2">
      <label for="slide1">&#10094;</label>
      <img src="https://i.stack.imgur.com/VxVNC.jpg" alt="yellow flower">
      <label for="slide3">&#10095;</label>
    </div>
    <div class="slides slide3">
      <label for="slide2">&#10094;</label>
      <img src="https://i.stack.imgur.com/A9VLC.jpg" alt="green forest">
      <label for="slide4">&#10095;</label>
    </div>
    <div class="slides slide4">
      <label for="slide3">&#10094;</label>
      <img src="https://i.stack.imgur.com/oYG0R.jpg" alt="blue rose">
      <label for="slide5">&#10095;</label>
    </div>
  </div>

  <div class="dots">
    <label for="slide1" class="slide1"></label>
    <label for="slide2" class="slide2"></label>
    <label for="slide3" class="slide3"></label>
    <label for="slide4" class="slide4"></label>
  </div>

</div>

БЛОГ НА HUSL

Как в CSS реализовать переключение input radio по ссылке?

Ответы (1 шт):