为什么检查单选按钮时，图像不会从容器外面滑出? [英] Why when radio button is checked the images are not sliding out of out of container?
本文介绍了为什么检查单选按钮时，图像不会从容器外面滑出?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
正如我所说，为什么检查单选按钮时，图像不会从容器中滑出?因为我想用纯CSS创建图像滑块.我也使用了position:absolute;左侧:-517px；与定位直接ID一起使用也不起作用.那么我的代码有什么问题吗?
As I said Why when radio button is checked the images are not sliding out of out of container? because I want to create image slider with pure css. I have used also with position:absolute; with left:-517px; along with targeting direct id's it is also not working. So is there any problem with my code?
.img-container{
width:1550px;
border:4px solid black;
padding:6px;
}
.crousel{
width:516px;
border:6px solid magenta;
height:350px;
display:flex;
}
img{
padding:6px;
}
.toggle-button:checked ~ .box {
translate(X):transform(-517px);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<div class="img-container">
<div class="crousel">
<label for="toggle1"></label>
<img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class="box">
<label for="toggle2"></label>
<img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class="box">
<label for="toggle3"></label>
<img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class="box">
</div>
</div>
<div class="buttons">
<input type="radio" name="button" id="toggle1" class="toggle-button">
<input type="radio" name="button" id="toggle2" class="toggle-button">
<input type="radio" name="button" id="toggle3" class="toggle-button">
</div>
</body>
</html>推荐答案
您可以这样操作...
You can do this like that way...
.slider {
width: 500px;
display: block;
position: relative;
overflow: hidden;
}
.rollSlider {
display: flex;
width: 1500px;
}
img {
max-width: 500px;
}
input#slide1:checked ~ .slider .rollSlider {
transform: translate(0px);
transition: all 300ms ease;
}
input#slide2:checked ~ .slider .rollSlider {
transform: translate(-500px);
transition: all 300ms ease;
}
input#slide3:checked ~ .slider .rollSlider {
transform: translate(-1000px);
transition: all 300ms ease;
}<input id="slide1" type="radio" name="slide" checked>
<input id="slide2" name="slide" type="radio">
<input id="slide3" name="slide" type="radio">
<div class="slider">
<div class="rollSlider">
<label for="slide1">
<img src="https://images.pexels.com/photos/4040806/pexels-photo-4040806.jpeg">
</label>
<label for="slide2">
<img src="https://images.pexels.com/photos/4686833/pexels-photo-4686833.jpeg">
</label>
<label for="slide3">
<img src="https://images.pexels.com/photos/4722021/pexels-photo-4722021.jpeg">
</label>
</div>
</div>这篇关于为什么检查单选按钮时，图像不会从容器外面滑出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
