如何使CSS滑块自动播放

Question

我有这个简单的HTML/CSS滑块只有2张幻灯片。 我需要让它每7秒自动播放幻灯片。 我不熟悉jquery或javascript，所以对我来说实现一个css解决方案会更容易...

你能帮忙吗？

您可以在行动，现在看到它 http://www.hotelgalatas.com/test/

谢谢！

HTML

<div class="css-slider-wrapper"> 
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1"> 
<input type="radio" name="slider" class="slide-radio2" id="slider_2"> 
<div class="slider-pagination"> 
<label for="slider_1" class="page1"></label> 
<label for="slider_2" class="page2"></label> 
</div> 
<div class="next control"> 
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i> 
</label> 
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i> 
</label> 
</div> 
<div class="previous control"> 
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i> 
</label> 
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i> 
</label> 
</div> 
<div class="slider slide1"> 
<div> 
<h2>First Slide Text</h2> 
<a href="#" class="button">Button1</a> <a href="#" class="button">Button2</a> </div> 
</div> 
<div class="slider slide2"> 
<div> 
<h2>Second Slide Text</h2> 
<a href="#" class="button">Button1</a> <a href="#" class="button">Button2</a> </div> 
</div> 
</div> 

CSS

body { 
overflow: hidden; 
width: 100%; 
height: 100%; 
padding: 0; 
margin: 0; 
} 
/* Slider wrapper*/ 
.css-slider-wrapper { 
display: block; 
background: #FFF; 
overflow: hidden; 
position: absolute; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
} 
/* Slider */ 
.slider { 
width: 100%; 
height: 100%; 
background: #ccc; 
position: absolute; 
left: 0; 
top: 0; 
opacity: 1; 
z-index: 0; 
display: flex; 
display: -webkit-flex; 
display: -ms-flexbox; 
flex-direction: row; 
flex-wrap: wrap; 
-webkit-flex-align: center; 
-webkit-align-items: center; 
align-items: center; 
justify-content: center; 
align-content: center; 
-webkit-transition: -webkit-transform 1600ms; 
transition: -webkit-transform 1600ms, transform 1600ms; 
-webkit-transform: scale(1); 
transform: scale(1); 
} 
/* each slide background color */ 
.slide1 { 
background: #00bcd7; 
left: 0; 
} 
.slide2 { 
background: #009788; 
left: 100%; 
} 
.slider > div { 
text-align: center; 
} 
/* Slider inner slide effect */ 
.slider h2 { 
color: #FFF; 
font-weight: 900; 
text-transform: uppercase; 
font-size: 45px; 
line-height: 120%; 
opacity: 0; 
-webkit-transform: translateX(500px); 
transform: translateX(500px); 
} 
.slider .button { 
color: #FFF; 
padding: 5px 30px; 
background: rgba(255,255,255,0.3); 
text-decoration: none; 
opacity: 0; 
font-size: 15px; 
line-height: 30px; 
display: inline-block; 
-webkit-transform: translateX(-500px); 
transform: translateX(-500px); 
} 
.slider h2, .slider .button { 
-webkit-transition: opacity 800ms, -webkit-transform 800ms; 
transition: transform 800ms, opacity 800ms; 
-webkit-transition-delay: 1s; /* Safari */ 
transition-delay: 1s; 
} 
/* Next and Prev arrows */ 
.control { 
position: absolute; 
top: 50%; 
width: 50px; 
height: 50px; 
margin-top: -25px; 
z-index: 55; 
} 
.control label { 
z-index: 0; 
display: none; 
text-align: center; 
line-height: 50px; 
font-size: 50px; 
color: #FFF; 
cursor: pointer; 
opacity: 0.2; 
} 
.control label:hover { 
opacity: 0.5; 
} 
.next { 
right: 1%; 
} 
.previous { 
left: 1%; 
} 
/* Slider Pager */ 
.slider-pagination { 
position: absolute; 
bottom: 20px; 
width: 100%; 
left: 0; 
text-align: center; 
z-index: 1000; 
} 
.slider-pagination label { 
width: 10px; 
height: 10px; 
border-radius: 50%; 
display: inline-block; 
background: rgba(255,255,255,0.2); 
margin: 0 2px; 
border: solid 1px rgba(255,255,255,0.4); 
cursor: pointer; 
} 
/* Slider Pager arrow event */ 
.slide-radio1:checked ~ .next .numb2, 
.slide-radio2:checked ~ .previous .numb1 
{ 
display: block; 
z-index: 1 
} 
/* Slider Pager event */ 
.slide-radio1:checked ~ .slider-pagination .page1, 
.slide-radio2:checked ~ .slider-pagination .page2 
{ 
background: rgba(255,255,255,1) 
} 
/* Slider slide effect */ 
.slide-radio1:checked ~ .slider { 
-webkit-transform: translateX(0%); 
transform: translateX(0%); 
} 
.slide-radio2:checked ~ .slider { 
-webkit-transform: translateX(-100%); 
transform: translateX(-100%); 
} 
.slide-radio1:checked ~ .slide1 h2, 
.slide-radio2:checked ~ .slide2 h2,  
.slide-radio1:checked ~ .slide1 .button, 
.slide-radio2:checked ~ .slide2 .button 
{ 
-webkit-transform: translateX(0); 
transform: translateX(0); 
opacity: 1 
} 

@media only screen and (max-width: 767px) { 
.slider h2 { 
font-size: 20px; 
} 
.slider > div { 
padding: 0 2% 
} 
.control label { 
font-size: 35px; 
} 
.slider .button { 
padding: 0 15px; 
} 
} 

Answer 1

对付你必须使用JavaScript/jQuery的时间。

您可以使用类名访问幻灯片，并每7秒添加/隐藏元素并将其与setInterval函数一起使用。

var interval = setInterval(function() {document.getElementById('previous-control').addClass('hide'); document.getElementById('next-control').addClass('show'); }, 7000); 

，你必须与显示器无添加隐藏和显示类在CSS和阻止