How to make CSS Slider to autoplay
up vote
0
down vote
favorite
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>html css slider autoplay
edited 2 days ago
Turnip
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
add a comment |
up vote
0
down vote
favorite
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>html css slider autoplay
edited 2 days ago
Turnip
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>html css slider autoplay
edited 2 days ago
Turnip
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
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>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>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>html css slider autoplay
html css slider autoplay
edited 2 days ago
Turnip
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
edited 2 days ago
Turnip
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
edited 2 days ago
Turnip
28.1k96589
edited 2 days ago
Turnip
28.1k96589
edited 2 days ago
Turnip
28.1k96589
28.1k96589
asked May 27 '17 at 20:20
mhtcka
11
asked May 27 '17 at 20:20
mhtcka
11
asked May 27 '17 at 20:20
mhtcka
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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
answered May 27 '17 at 20:28
Avinash
391111
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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
answered May 27 '17 at 20:28
Avinash
391111
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
add a comment |
up vote
0
down vote
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
answered May 27 '17 at 20:28
Avinash
391111
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
add a comment |
up vote
0
down vote
up vote
0
down vote
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
answered May 27 '17 at 20:28
Avinash
391111
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
answered May 27 '17 at 20:28
Avinash
391111
answered May 27 '17 at 20:28
Avinash
391111
answered May 27 '17 at 20:28
Avinash
391111
answered May 27 '17 at 20:28
Avinash
391111
391111
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
add a comment |
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
Thank you Avinash for your tip, However, since i am not familiar with javascript at all, can i ask you: - I assume that I have to make a separate js file with the above code (ie autoplay.js). How do i call the js? within html? - I understand that i also have to hide/show the elements slide1, slide2 and also their text and nav buttons using css. can you please guide me to this? thank you
– mhtcka
May 28 '17 at 10:27
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
yes you have to create a new js file and use script tag to use that javascript file in your html code
– Avinash
May 30 '17 at 2:22
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44221264%2fhow-to-make-css-slider-to-autoplay%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
