我从 codepen.io 找到了这个滑块，我希望在我的网站上实现它，但我需要它有 8 张幻灯片。
我认为我必须在 html 和 css 中添加其他幻灯片，但这样做后分页无法正常工作。它从最后一张幻灯片开始，有些幻灯片未显示。我不知道为什么，希望我们中的一些人可以提供帮助，为什么带有 8 个幻灯片的滑块不起作用，为什么带有 5 个幻灯片的滑块可以工作。
这是代码和来自 codepen.io 的链接
`codepen.io/RajTemplate/pen/rNwJmGM`
/**CSS **/
#slider {
position: relative;
width: 50%;
height: 32vw;
margin: 150px auto;
font-family: 'Helvetica Neue', sans-serif;
perspective: 1400px;
transform-style: preserve-3d;
}
input[type=radio] {
position: relative;
top: 108%;
left: 50%;
width: 18px;
height: 18px;
margin: 0 15px 0 0;
opacity: 0.4;
transform: translateX(-83px);
cursor: pointer;
}
input[type=radio]:nth-child(5) {
margin-right: 0px;
}
input[type=radio]:checked {
opacity: 1;
}
#slider label,
#slider label img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
color: white;
font-size: 70px;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 400ms ease;
}
/* Slider Functionality */
/* Active Slide */
#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
transform: translate3d(0%, 0, 0px);
}
/* Next Slide */
#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(20%, 0, -100px);
}
/* Next to Next Slide */
#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
transform: translate3d(40%, 0, -250px);
}
/* Previous to Previous Slide */
#s1:checked ~ #slide4,
#s2:checked ~ #slide5,
#s3:checked ~ #slide1,
#s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
transform: translate3d(-40%, 0, -250px);
}
/* Previous Slide */
#s1:checked ~ #slide5,
#s2:checked ~ #slide1,
#s3:checked ~ #slide2,
#s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(-20%, 0, -100px);
}
/*** HTML ***/
<section id="slider">
<input type="radio" name="slider" id="s1" checked>
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3">
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1"><img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" alt=""></label>
<label for="s2" id="slide2"><img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg" alt=""></label>
<label for="s3" id="slide3"><img src="https://wallpaperaccess.com/full/1154341.jpg" alt=""></label>
<label for="s4" id="slide4"><img src="https://wallpapercave.com/wp/wp2634222.jpg" alt=""></label>
<label for="s5" id="slide5"><img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg" alt=""></label>
</section>
</body>
</html>
这是我的代码，我尝试过：
/*** HTML ***/
<section id="slider"><input id="s1" checked="checked" name="slider" type="radio" /> <input id="s2" name="slider" type="radio" /> <input id="s3" name="slider" type="radio" /> <input id="s4" name="slider" type="radio" /> <input id="s5" name="slider" type="radio" /> <input id="s6" name="slider" type="radio" /> <input id="s7" name="slider" type="radio" /> <input id="s8" name="slider" type="radio" />
<label id="slide1" for="s1"><img src="image1.jpg" alt="">Test1</label>
<label id="slide2" for="s2"><img src="image2.jpg" alt="">Test2</label>
<label id="slide3" for="s3"><img src="image3.jpg" alt="">Test3</label>
<label id="slide4" for="s4"><img src="image4.jpg" alt="">Test4</label>
<label id="slide5" for="s5"><img src="image5.jpg" alt="">Test5</label>
<label id="slide6" for="s6"><img src="image6.jpg" alt="">Test6</label>
<label id="slide7" for="s7"><img src="image7.jpg" alt="">Test7</label>
<label id="slide8" for="s8"><img src="image8.jpg" alt="">Test8</label>
</section>
/*** CSS ***/
#slider {
position: relative;
width: 50%;
height: 32vw;
margin: 150px auto;
font-family: 'Helvetica Neue', sans-serif;
perspective: 1400px;
transform-style: preserve-3d;
}
input[type=radio] {
position: relative;
top: 108%;
left: 50%;
width: 18px;
height: 18px;
margin: 0 15px 0 0;
opacity: 0.4;
transform: translateX(-83px);
cursor: pointer;
}
input[type=radio]:nth-child(8) {
margin-right: 0px;
}
input[type=radio]:checked {
opacity: 1;
}
#slider label,
#slider label img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
color: white;
font-size: 70px;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 400ms ease;
}
.arrows{
width: 48px;
height: 48px;
position: absolute;
top: 50%;
margin-top: -31px;
}
.prev{
left: 10px;
z-index: 200;
}
.prev:hover, .next:hover{
color: var(--logo_color);
}
.next{
right: 10px;
z-index: 200;
}
.arrows::before {
font-family: 'Font Awesome 5 free';
font-size: 40px;
font-weight: 600;
}
.prev::before {
content: '\f0a8'; /* Unicode for the Font Awesome chevron-left icon */
}
.next::before {
content: '\f0a9';
}
/* Slider Functionality */
/* Next Slide on Next Arrow Click */
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide1,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide2,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide3,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide4,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide5,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide6,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide7,
.next:hover ~ input:checked ~ input ~ input ~ input ~ #slide8 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(20%, 0, -100px);
}
/* Previous Slide on Previous Arrow Click */
.prev:hover ~ input:checked ~ #slide8,
.prev:hover ~ input:checked ~ #slide1,
.prev:hover ~ input:checked ~ #slide2,
.prev:hover ~ input:checked ~ #slide3,
.prev:hover ~ input:checked ~ #slide4,
.prev:hover ~ input:checked ~ #slide5,
.prev:hover ~ input:checked ~ #slide6,
.prev:hover ~ input:checked ~ #slide7 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(-20%, 0, -100px);
}
/* Active Slide */
#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4,
#s5:checked ~ #slide5,
#s6:checked ~ #slide6,
#s7:checked ~ #slide7,
#s8:checked ~ #slide8 {
box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
transform: translate3d(0%, 0, 0px);
}
/* Next Slide */
#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide5,
#s5:checked ~ #slide6,
#s6:checked ~ #slide7,
#s7:checked ~ #slide8,
#s8:checked ~ #slide1 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(20%, 0, -100px);
}
/* Next to Next Slide */
#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide6,
#s5:checked ~ #slide7,
#s6:checked ~ #slide8,
#s7:checked ~ #slide1,
#s8:checked ~ #slide2 {
box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
transform: translate3d(40%, 0, -250px);
}
/* Previous to Previous Slide */
#s1:checked ~ #slide4,
#s2:checked ~ #slide5,
#s3:checked ~ #slide6,
#s4:checked ~ #slide7,
#s5:checked ~ #slide8,
#s6:checked ~ #slide1,
#s7:checked ~ #slide2,
#s8:checked ~ #slide3 {
box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
transform: translate3d(-40%, 0, -250px);
}
/* Previous Slide */
#s1:checked ~ #slide5,
#s2:checked ~ #slide6,
#s3:checked ~ #slide7,
#s4:checked ~ #slide8,
#s5:checked ~ #slide1,
#s6:checked ~ #slide2,
#s7:checked ~ #slide3,
#s8:checked ~ #slide4 {
box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(-20%, 0, -100px);
}
a .label_titel{
color: black;
font-size: 50px;
position: relative;
text-align: center;
}
我的错误在哪里？
预先感谢，新手
对于每张幻灯片，CSS 中都必须激活才能进行转换。
为您修复它，请参阅此处以更好地了解它的外观 codepen“codepen.io/Ramon-Suarez/pen/jOXLejw”