嗨,我试图用HTML/CSS做一个滑块,但我不能让代码工作:这是CSS代码:
.content { height: 520px;width: 935px; overflow: hidden;
position: absolute;top: 50%; left:50%; transform:
translate(-50%,-25%);}
.navigation { position: absolute; bottom: 20px; left : 50%;
transform: translate(-50%); display: flex;}
.bar { width: 70px; height: 17px; border: 2px solid white;
margin: 6px; border-radius: 5px; cursor: pointer;
transition: 0.4s;}
.bar:hover { background-color: white;}
.slides{ display: flex; /*width: 100%; height: 100%;*/ }
.slide { width: 20%; transition: .6s; }
.slide img { width: 100%; height: 100%;}
#slide1:checked ~.s1 { margin-left:0; }
#slide2:checked ~.s1 { margin-left: -20%;}
我想我在幻灯片类的注解部分犯了同样的错误,这是HTML代码:
<div class="content">
<div class="slides">
<input type="radio" name="slide" id="slide1"
checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<input type="radio" name="slide" id="slide4">
</div>
<div class="slide" s1>
<img src="img/XU/Xu1a.jpg" alt="Robaleiro Xu">
</div>
<div class="slide" >
<img src="img/XU/Xu2a.jpg" alt="Robaleiro Xu">
</div>
<div class="slide" >
<img src="img/XU/Xu3a.jpg" alt="Robaleiro Xu">
</div>
<div class="slide" >
<img src="img/XU/Xu5a.jpg" alt="Robaleiro Xu">
</div>
<div class="navigation">
<label class="bar" for="slide1"></label>
<label class="bar" for="slide2"></label>
<label class="bar" for="slide3"></label>
<label class="bar" for="slide4"></label>
</div>
我已经修改了这些代码很多次,在youtube示例中,此代码工作正常,但不适合我,感谢任何方向亚历杭德罗
1条答案
按热度按时间rqqzpn5f1#
首先,你需要了解“~”CSS选择器是如何工作的。
(article|example)
它选择了同一个父元素中的一个相邻元素。所以“input标签”和“.slide标签”应该有相同的父元素。
以下是工作示例: