Automatic image slider | automatic image slider using html and css

Automatic image slider | automatic image slider using html and css




Automatic image slider | automatic image slider using html and css


Hello....Welcome to Code with Random..... In today blog we are creating AUTOMATIC IMAGE SLIDER USING HTML AND CSS.
It is a image slideshow which represent multiple image.It is autoplaying image slider.
So Let start to create image slider before that you see the live server which is given here...

LIVE SERVER:-

See the Pen CSS Slider by msrafi (@msrafi) on CodePen.

HTML CODE:-

In this we want to add 4 slides but here we want to list the image and add image source as given in this code.
 <h1 style="margin-top:150px; text-align:center">CSS Only Automatic Image Slider Demo</h1>  
 <input id="sliderSwitch" class="slider__switch" type="checkbox" name="sliderSwitch" hidden />  
 <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>  
 <div class="slider__control">  
  <label for="sliderSwitch"></label>  
 </div>  

HTML OUTPUT:-








CSS CODE:-

Here their is autoplay button if we want slide show then click the button of autoplay which is given.The position of 1 to 4 slide is given.

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

CSS OUTPUT:-




Here yours AUTOMATIC IMAGE SLIDER USING WITH HTML AND CSS is done....
It done with only html and css their is no use of JS code.
If you like this article or any doubt comment in comment box......


THANKYOU......😄


Written_By:-Sayali Kharat






Post a Comment

Previous Post Next Post