链接到单选按钮的纯CSS滑块
链接到单选按钮的纯CSS滑块
提问于 2017-10-25 14:56:45
我想知道是否有一种方法来创建一个可点击的滑块，这是额外可控的单选按钮，只要使用本地CSS -没有JavaScript。
滑块应该是这样的
我想把图像放到有关单选按钮的标签中，但相对地将它们定位到整个无线电组容器的包装器中，然后根据单选按钮是什么: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的~-operator，但这只会影响以下组件，而不是所有的3个。
另外，我想在图像包装器中添加一些overflow: hidden，但是由于它们的第一个常见包装器是.carousel__nav，所以我不能简单地隐藏它的溢出，因为这也会隐藏单选按钮。
我希望保留这个结构，因为只要更改一个CSS类，就可以将相同的组件显示为常规的单选按钮组或滑块。
仅仅使用CSS就可以做到这一点，还是这里确实需要一些JavaScript？我想阻止它，但是保持HTML结构具有优先级nr 1。
回答 1
Stack Overflow用户
发布于 2017-10-25 16:02:04
您可以这样做，仅使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46935716
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号