如何使CSS Slider自动播放

Question

I have this simple HTML/CSS slider with only 2 slides. I need to make it autoplay the slides every 7 seconds. I am not familiar with jquery or javascript, so it would be easier for me to implement a css solution...

Can you help?

You can see it in action right now at http://www.hotelgalatas.com/test/

Thanks!

 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; } } 

 <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> 

Answer 1

to deal with time you have to use javascript/jquery.

you can access the slides by using class names and add/hide the elements every 7 seconds and use them with setInterval function.

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

where you have to add the hide and show classes in css with display none and block