CSS：用无线电滑动图像：选中（纯CSS滑块） [英] CSS: Sliding an image with radio:checked (Pure CSS slider)
问题描述
目标是仅使用CSS创建滑块。
对于这种尝试，我尝试使用具有'3个部分'（颜色编码）的$ 200 $ 1500像素图像
绝对定位左：0，默认选中的单选按钮显示图像的第一个500像素（幻灯片1），因为包装是200x500像素，并且隐藏了溢出。
通过label'slide2'检查单选按钮，通过放置图像Left：-500px，为我提供下一个500像素的图像（幻灯片2）。
现在工作正常。
我得到的问题是让图像滑动-1000px，从而显示图像的最后500px（幻灯片3）。看起来，当我添加第三个无线电输入和标签时，滑块断开，其他输入不起作用。事实上，第一个单选按钮css有时似乎毫无意义，因为在图像上设置转换本身似乎对于获得'幻灯片1'单选按钮的所需效果是必要的。
The goal is to create a slider using only CSS. For this attempt I tried using a 200px by 1500px image that has '3 sections' (color coded) Positioned absolutely with Left: 0, the default checked radio button shows the first 500px of the image (Slide 1), since the wrapper is 200x500 pixels with overflow hidden. Checking the radio button via label for 'slide2' gives me the next 500px of the image (Slide 2) by positioning the image Left: -500px. Which works fine for the time being. The problem I've got is getting the image to slide -1000px, thus showing the final 500px of the image (Slide 3). It seems when I add a third radio input and label, the slider breaks and the other inputs don't do anything. In fact, the 1st radio button css sometimes seems pointless, since setting a transition on the image itself appears to be necessary to get the desired effect for the 'Slide 1' radio button.
链接至图片： http://imgur.com/a/DCiI4
HTML：
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<body>
<div id="wrap">
<input type="radio" id="slide1" name="radio" checked>
<input type="radio" id="slide2" name="radio">
<!--<input type="radio" id="slide3" name="radio">-->
<img src="images/slides.jpg"/>
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<!--<label for="slide3">slide3</label>-->
</div>
</body>
</html>
CSS：
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 500px;
height: 200px;
background: #000;
color: #fff;
position: relative;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 20;
left: 0;
transition: .5s ease-out;
height: 200px;
width: 1500px;
}
input[type="radio"] {
display: none;
}
#slide1:checked + img {
left: 0;
transition: .5s ease-out;
}
#slide2:checked + img {
left: -500px;
transition: .5s ease-out;
}
/*#slide3:checked + img {
left: -1500px;
transition: .5s ease-out;
}*/
感谢您的帮助！如果有一种更容易/更简单的方法来制作带有控件的滑块，我很想知道。尝试了几个我在网上找到的例子，但是没有看到或者看起来像我想要的那样。
Appreciate the help! And if there's an easier/simpler way to do a slider with controls in just css, I'd love to know. Tried a couple of examples I've found online but none look or animate quite how I'd like.
推荐答案
- 合并了一些CSS，使用第三张图片扩展它，并使用 translateX（）和 opacity 来增强幻灯片之间的转换。
Here ya go - consolidated some of your CSS, extended it with a 3rd image, and am using translateX() and opacity to enhance the transition between slides.
img {
position: absolute;
top: 0;
left: 0;
transition: opacity .5s ease-out, transform .5s ease-out;
transform: translateX(-100%);
/* transform: translateX(-100%) rotate(-720deg); */ /* try this, it's nuts */
opacity: 0;
}
input[type="radio"] {
display: none;
}
input:checked + img {
transform: translateX(0);
/* transform: translateX(0) rotate(0); */ /* try this with the commented line above */
opacity: 1;
z-index: 1;
}
.controls {
position: absolute;
top: 0; left: 0;
z-index: 2;
}
label {
background: rgba(0,0,0,0.8);
color: #fff;
padding: .5em;
margin: 0 1em 0 0;
display: inline-block;
cursor: pointer;
}
<div id="wrap">
<input type="radio" id="slide1" name="radio" checked>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<input type="radio" id="slide2" name="radio">
<img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg">
<input type="radio" id="slide3" name="radio">
<img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85">
<div class="controls">
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<label for="slide3">slide3</label>
</div>
</div>
这篇关于CSS：用无线电滑动图像：选中（纯CSS滑块）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
