Automatic Image Slider with Pure CSS

Posted By : Monu Thakur | 30-Nov-2017

Just a simple automatic image slider that uses only right-to-left images, just pussy. I've seen a very serious parser in JavaScript, which slows webpages based on JavaScript and does not work if the user has disabled JavaScript in your browser. There is no one solution to this problem. Use this slider, but how do you use the slider without JavaScript? This article describes the response to business model of sliders without JavaScript. How to use:

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

Add a scroll bar to the web page.

<input class="slider__switch" hidden="" id="sliderSwitch" name="sliderSwitch" type="checkbox">

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: &quot;autoplay&quot;;
  position: absolute;
  top: 2.5rem;
  left: 0;
  color: #333;
 font-size: .95rem;
  font-weight: bold;
  text-transform: uppercase;
}

.slider__control label:after {
  content: &quot;&quot;;
  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 &gt; .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 &gt; label { background: #455a64; }

.slider__switch:checked + .slider + .slider__control &gt; 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;
}
}

Thanks

 

 

 

 

About Author

Author Image
Monu Thakur

Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.

Request for Proposal

Name is required

Comment is required

Sending message..