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







share|improve this question




























    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







    share|improve this question


























      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







      share|improve this 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>








      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 2 days ago









      Turnip

      28.1k96589




      28.1k96589










      asked May 27 '17 at 20:20









      mhtcka

      11




      11
























          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






          share|improve this answer





















          • 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











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          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

























          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






          share|improve this answer





















          • 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















          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






          share|improve this answer





















          • 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













          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






          share|improve this answer












          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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


















          • 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


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          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





















































          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







          -

          Popular posts from this blog

          What visual should I use to simply compare current year value vs last year in Power BI desktop

          Image
          0 I have column SubToBind that shows current year ratio and column PY SubToBind which shows previous year ratio. How can I simply create a card that would be displaying them both in a nice way? Something like that: I cannot achieve that with regular card, I also tried Card with States by OKViz but also unable to see both values. In KPI visual - I dont like the word "Goal", it will confuse end users. Are there any cards or other visuals that would do the job? Thanks powerbi dax powerbi-embedded share | improve this question edited Jun 11 '18 at 20:11 Oleg ...
          Read more

          How to ignore python UserWarning in pytest?

          Image
          up vote 1 down vote favorite I am using openpyxl for parsing .xlsm files, and pytest for testing. When I open a file, I get the: OpenPyxl -> UserWarning: Data Validation extension is not supported and will be removed That is not really a problem bcs. program works and I can't change the .xlsm file to fix that. But... When I run pytest with something like: def test_wrong_file_format(): assert check_excel(open_excel('file.xlsm')) == True I will get the warning i mentioned altought check_excel(open_excel('file.xlsm')) returns True and the test should suceed... Is there a nice way to tell the pytest that "It's not a bug it's a feature" and tests should pass even when they get this warning? Is there other way than using something like: with pytest.warns(UserWarning): ...
          Read more

          Alexandru Averescu

          Image
          Alexandre Averescu Alexandru Averescu Naissance 3 avril 1859 Babele, Ismail  (ro) près de Izmaïl (principauté de Moldavie) Décès 2 octobre 1938 (à 79 ans) [ 1 ] Bucarest Origine   Roumanie Arme cavalerie Grade Maréchal Années de service 1901-1917 Commandement chef d'état-major général 2 e  armée 3 e  armée Groupe d'armée sud armée du Danube Conflits Guerre russo-turque de 1877-1878 Deuxième guerre balkanique Première Guerre mondiale Faits d'armes Bataille de Turtucaia/Tutrakan Bataille de Mărăști Distinctions Autres fonctions 3 fois président du Conseil des ministres ministre des Affaires étrangères ministre sans portefeuille conseiller de la Couronne modifier   Alexandre Averescu (en roumain : Alexandru Averescu .mw-parser-output .prononciation>a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png")center ...
          Read more