如何创建HTML滑块？

Question

我在4-5年前问过这个问题。现在，格式化它，以便我不再被阻止。

我想用css创建一个HTML滑块，但没有javascript。

这是我的尝试，我该如何改进它？ 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; 
} 

Answer 1

你真的应该阅读了关于如何使用HTML和CSS工作。我建议阅读关于html和css的解释w3schools.com。你想知道的是在这种情况下，主要是列表和链接（html方式）和你可以用边框（css-wise）做的有趣事情。例如，要制作css圈子，David Walsh有nice blog-entry。

我也必须同意李斯特先生的看法，认为你两点确实是分开的问题。实际上，它们是不同的技术：第一个是HTML/CSS问题，后者是一个javascript问题。

一个友好的建议：不要从一开始就想要一切。这会压低（我知道！）。让自己适应HTML的工作方式，特别是交互页面和内容。一旦你了解了这一点，试用javascript（imho jQuery非常易于使用，如：可以快速找到结果）。提示：您想试用jQuery的display: none CSS属性和div#id.show()函数。

祝你好运，玩得开心（这就是它的一切应该是关于）！