链接到单选按钮的纯CSS滑块

Question

我想知道是否有办法创建一个可点击的滑块，只需使用原生CSS，就可以通过单选按钮进行控制 - 无需JavaScript。

滑块应如下所示

我想把图像放到相关的单选按钮上。标签，但相对于整个无线电组容器的包装器定位它们，然后根据单选按钮:checked为图像添加正或负边距。

这是我到目前为止所得到的：

＆＃13;

＆＃13;

.carousel__nav {
  display: flex;
}
.mwf-option label img {
  width: 182px;
  height: 95px;
}
.style-2 .mwf-option {
  margin-top: 100px;
}
.style-2 .carousel__nav label.btn {
  position: absolute;
  top: 0;
  padding: 0;
  transition: 1s;
}
.style-2 .mwf-option:nth-child(1) label.btn {
  left: calc(182px * 1);
}
.style-2 .mwf-option:nth-child(2) label.btn {
  left: calc(182px * 2);
}
.style-2 .mwf-option:nth-child(3) label.btn {
  left: calc(182px * 3);
}
.style-2 .mwf-option:nth-child(1) .mwf-radio:checked ~ label.btn {
  margin-left: 182px;
}
.style-2 .mwf-option:nth-child(3) .mwf-radio:checked ~ label.btn {
  margin-left: -182px;
}

＆＃13;

<div class="carousel__wrapper style-2">
          <div class="carousel__nav">
            <span class="mwf-option">
              <input type="radio" id="radio1" name="radio-group" class="mwf-radio input-hidden">
              <label for="radio1" class="btn">
                <div class="VueCarousel-slide"><img id="slide-1" src="https://i.imgur.com/OhXJ7rk.jpg">
                </div>
              </label>
              <span class="btn">One</span>
            </span>
            <span class="mwf-option">
              <input type="radio" id="radio2" name="radio-group" class="mwf-radio input-hidden">
              <label for="radio2" class="btn">
                <div class="VueCarousel-slide"><img id="slide-2" src="https://i.imgur.com/6wxbv7n.jpg">
                </div>
              </label>
              <span class="btn">Two</span>
            </span>
            <span class="mwf-option">
              <input type="radio" id="radio3" name="radio-group" class="mwf-radio input-hidden" value="mwf7_2566_666">
              <label for="radio3" class="btn">
                <div class="VueCarousel-slide"><img id="slide-3" src="https://i.imgur.com/Cc0BzB8.jpg">
                </div>
              </label>
              <span class="btn">Three</span>
            </span>
          </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

我很难挣扎，因为我不确定如何根据选中的单选按钮为所有图像设置边距。我目前正在使用CSS的~ - 运算符，但这只会影响以下组件，而不是所有3个组件。

此外，我想在图像包装器中添加一些overflow: hidden，但由于它们的第一个常见包装器是.carousel__nav，我不能简单地隐藏它的溢出，因为这也会隐藏单选按钮。

我希望保留此HTML结构，因为只需更改CSS类就可以显示与常规单选按钮组相同的组件或滑块。

这可以通过使用CSS来实现，还是我在这里肯定需要一些JavaScript？我想阻止它，但保持HTML结构优先级为1。

Answer 1

你可以做这样的事情，仅使用CSS的主要问题是它非常严格。事先必须说明一切，如果你改变幻灯片的数量，你必须改变一堆CSS。

＆＃13;

＆＃13;

:root {
  --total-slides: 3;
}

body {
  margin: 0;
}

[name=slider-group] {
  display: none;
}

.slider_container {
  overflow-x: hidden;
}

.slider {
  width: calc(var(--total-slides)*100vw);
  font-size: 0;
  transition: transform 600ms ease-in-out;
}

.slider_slide {
  width: 100vw;
  height: 140px;
  display: inline-block;
  font-size: 11px;
  background: #f44336;
}

.slider_slide:nth-child(even) {
  background: #3F51B5;
}

#radio1:checked~.slider {
  transform: translateX(0);
}

#radio2:checked~.slider {
  transform: translateX(-100vw);
}

#radio3:checked~.slider {
  transform: translateX(-200vw);
}

.slider_nav {
  text-align: center;
  background: #37474F;
}

.slider_nav .btn {
  background-color: #607D8B;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

＆＃13;

<div class="slider_container">
  <input type="radio" name="slider-group" id="radio1" />
  <input type="radio" name="slider-group" id="radio2" />
  <input type="radio" name="slider-group" id="radio3" />
  <div class="slider">
    <div class="slider_slide"></div>
    <div class="slider_slide"></div>
    <div class="slider_slide"></div>
  </div>
</div>
<nav class="slider_nav">
  <label class="btn" for="radio1">One</label>
  <label class="btn" for="radio2">Two</label>
  <label class="btn" for="radio3">Three</label>
</nav>

＆＃13;

＆＃13;

＆＃13;