Automatic Image Slider with Pure CSS

Category: CSS & CSS3 , Slider | November 16, 2015
Author: alexdevero
Views Total: 11,511
Official Page: Go to website
Last Update: November 16, 2015
License: MIT

Preview:

Automatic Image Slider with Pure CSS

Description:

A simple, CSS only, automatic image slider that makes use of CSS3 properties to move images from right to left.

How to use it:

Add a group of images into the slider.

<div class="slider">
  <ul class="slider__list">
    <li class="slider__slide"><img src="1.jpg" alt="Image 1" /></li>
    <li class="slider__slide"><img src="2.jpg" alt="Image 2" /></li>
    <li class="slider__slide"><img src="3.jpg" alt="Image 3" /></li>
    <li class="slider__slide"><img src="4.jpg" alt="Image 4" /></li>
  </ul>
</div>

Add a slider control to the webpage.

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

Style the image slider.

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

The CSS rules for the 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; }

Enable autoplay using CSS3 keyframes.

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

You Might Be Interested In:


4 thoughts on “Automatic Image Slider with Pure CSS

  1. whatever

    I hate sliders that autoplay with no way to turn them off. So this is very nice from that regard.

    What would it take to “flip” the slides manually?

    Reply
  2. Teddy Salad

    Typed it out in Webstorm, checked for mistakes…Does not work. Copied into Brackets and realigned my links..doesn’t work…in chrome or Firefox..why ?

    Reply
    1. Rijan Regmi

      There is some process dude,, copy paste doesn’t works everytime.

      Reply

Leave a Reply