我在 4-5 年前问过这个问题。现在,格式化它,这样我就不会再次被阻止。
我想用 css 但没有 javascript 创建一个 HTML Slider。
这是我的尝试,我该如何改进? https://codepen.io/fearless23/pen/GELXma
HTML
<div class="slides-container">
<div>
<input id="slide1" type="radio" name="login-slide" class="hidden" checked>
<div class="slide">Slide1</div>
<label for="slide1" class="slide-dot"></label>
</div>
<div>
<input id="slide2" type="radio" name="login-slide" class="hidden">
<div class="slide">Slide2 </div>
<label for="slide2" class="slide-dot" style="left: 12.52em;"></label>
</div>
<div>
<input id="slide3" type="radio" name="login-slide" class="hidden">
<div class="slide">Slide3 </div>
<label for="slide3" class="slide-dot" style="left:14.52em;"></label>
</div>
</div>
CSS
*, *:after, *:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slides-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
}
.slide {
position: absolute;
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
padding: 2em 2em 5em;
color: white;
background: black;
}
.slides-container input[type="radio"]:checked + .slide {
visibility: visible;
opacity: 1;
}
.hidden {
position: absolute;
opacity: 0;
hieght: 0;
overflow: hidden;
}
label.slide-dot {
position: absolute;
z-index: 100;
bottom: 2em;
left: 10.52em;
width: 1em;
height: 1em;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
.slides-container input[type="radio"]:checked ~ label {
background: #2ca58d;
}