css - 链接到单选按钮的纯 CSS slider

Question

我想知道是否有一种方法可以创建一个可点击的 slider ，该 slider 仅通过使用 native CSS 即可通过单选按钮进行额外控制 - 无需 JavaScript。

slider 应该是这样的

我想将图像放入有关单选按钮的标签中，但将它们相对于整个单选组容器的包装器定位，然后根据单选按钮 :checked.

这是我到目前为止得到的:

.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;
}

<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>

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

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

我想保留这个 HTML 结构，因为只需更改 CSS 类就可以显示与常规单选按钮组或 slider 相同的组件。

仅使用 CSS 就可以做到这一点，还是我在这里肯定需要一些 JavaScript？我想阻止它，但保持 HTML 结构的优先级为 nr 1。

Answer 1

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

: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;
}

<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>