How to Create Basic Slider Using only Css

There is a lot of slider over-here. We can make slider using jquery, Css, JavaScript and also using WordPress plugin. If we create slider using jquery and JavaScript we have to include library functions and also script. It may casue our website slow the loading speed. So we can a make slider using css in easy way. Its is reduce website weight.

Demo

So here we are going to learn how to create basic slider using only css

Step 1 – HTML

<div id="images">
  <img id="image1" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image2" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image3" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image4" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

Step 2 – CSS

body {
  text-align: center;
}

#images {
  width: 400px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}

#images img {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 0;
  left: -400px;
  z-index: 1;
  opacity: 0;
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}

#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}

#images img:first-child {
  left: 0;
  opacity: 1;
}

#slider a {
  text-decoration: none;
  background: #E3F1FA;
  border: 1px solid #C6E4F2;
  padding: 4px 6px;
  color: #222;
}

#slider a:hover {
  background: #C6E4F2;
}

This is code. have a fun

Share this:

About Author