如何使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和阻止