时间戳

首页 > 解决方案 > 为什么在检查单选按钮时，图像没有从容器中滑出？

html - 为什么在检查单选按钮时，图像没有从容器中滑出？

问题描述

正如我说的为什么在检查单个按钮时，图像没有从容器中滑出？因为我想用纯 css 创建图像滑块。我也使用了 position:absolute; 左：-517px；除了定位直接 ID 之外，它也无法正常工作。那么我的代码有什么问题吗？

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

标签： htmlcss

解决方案

你可以像那样做......

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

推荐阅读