Simple Auto Play Image Slider in Pure CSS3

by Posted on

In this tutorial I am going to share CSS3 only script to create simple auto play image slider, script written by Alex Devero, a simple auto play button can enable automatically image slide show. You don’t need any third party jquery slider plugin this script written in pure CSS3 and HTML. Just copy the following script and all done and link your images.



HTML

Create unordered list and with list of images you want to slide automatically on click of auto play button.

<div class="slider">
<ul class="slider__list">
<li class="slider__slide"><img src="https://unsplash.it/650/420?image=924" alt="Slide 1" /></li>
<li class="slider__slide"><img src="https://unsplash.it/650/420?image=923" alt="Slide 2" /></li>
<li class="slider__slide"><img src="https://unsplash.it/650/420?image=922" alt="Slide 3" /></li>
<li class="slider__slide"><img src="https://unsplash.it/650/420?image=921" alt="Slide 4" /></li>
</ul>
</div>

Add auto play button which help you to auto play slide show.

<input id="sliderSwitch" class="slider__switch" type="checkbox" name="sliderSwitch" hidden />
<div class="slider__control">
<label for="sliderSwitch"></label>
</div>



CSS

Styling slider with auto play slideshow animation.

ul, li  {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
 
body { line-height: 1 }
 
ol, ul { list-style: none }
 
blockquote, q { quotes: none }
 
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}
 
table {
  border-collapse: collapse;
  border-spacing: 0
}
 

 
body {
  font-size: 100%;
  background: #f1f1f1;
}
 

 
hidden { display: none; }
 

@-webkit-keyframes 
autoplay {   
  0% {
 left: 0;
}
  
  25% {
 left: -40.625rem;
}
  
  50% {
 left: -81.25rem;
}
  
  100% {
 left: -121.875rem;
}
}
@keyframes 
autoplay {   
  0% {
 left: 0;
}
  
  25% {
 left: -40.625rem;
}
  
  50% {
 left: -81.25rem;
}
  
  100% {
 left: -121.875rem;
}
}
 

 
.slider {
  position: relative;
  
  margin-top: 3rem;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  width: 40.625rem;
  height: 26.25rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
 
.slider__list {
  position: absolute;
  left: 0;
  width: 162.5rem;
}
 
.slider__slide { float: left; }
 

 
.slider__control {
  margin-right: auto;
  margin-left: auto;
  width: 4.5rem;
  font-family: sans-serif;
}
 
.slider__control label {
  position: relative;
  display: block;
  margin-top: 2rem;
  margin-bottom: 1rem;
  width: 4.5rem;
  height: 2rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: transparent;
  background: #ddd;
  border-radius: 2rem;
  cursor: pointer;
  -webkit-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}
 
.slider__control label:before {
  content: "autoplay";
  position: absolute;
  top: 2.5rem;
  left: 0;
  color: #333;
 font-size: .95rem;
  font-weight: bold;
  text-transform: uppercase;
}
 
.slider__control label:after {
  content: "";
  position: absolute;
 top: .25rem;
 left: .25rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 2rem;
  background: #fff;
  -webkit-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 
.slider__switch:checked + .slider > .slider__list {
  -webkit-animation-name: autoplay;
  animation-name: autoplay;
  
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
 
.slider__switch:checked + .slider + .slider__control > label { background: #455a64; }
 
.slider__switch:checked + .slider + .slider__control > label:after { left: 2.75rem; }

See live demo and download source code.

DEMO | DOWNLOAD



Published by admin