Php tutorials

How to Create Basic Slider Using only Css

Google+ Pinterest LinkedIn Tumblr

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.

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

I'm Rajasekar - Web developer, Freelancer, Blogger and Owner of DeveloperDesks. From India lives in Bahrain. I love to do coding, Creating websites and trying different with code and designs. You Can Hire Me

Write A Comment