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
}
 
/**
 * Base
 */
 
body {
  font-size: 100%;
  background: #f1f1f1;
}
 
/* Fallback for hidden attribute */
 
hidden { display: none; }
 
/**
 * Keyframes for autoplay
 */
@-webkit-keyframes 
autoplay {   /* position of the first slide */
  0% {
 left: 0;
}
  /* position of the second slide */
  25% {
 left: -40.625rem;
}
  /* position of the third slide */
  50% {
 left: -81.25rem;
}
  /* position of the fourth slide */
  100% {
 left: -121.875rem;
}
}
@keyframes 
autoplay {   /* position of the first slide */
  0% {
 left: 0;
}
  /* position of the second slide */
  25% {
 left: -40.625rem;
}
  /* position of the third slide */
  50% {
 left: -81.25rem;
}
  /* position of the fourth slide */
  100% {
 left: -121.875rem;
}
}
 
/**
 * Slider
 */
 
.slider {
  position: relative;
  /* top margin is for purposes of demo */
  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
 */
 
.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;
  /* This will change the time it takes to move to next slide */
  -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