Create A Responsive Fading Image Slider With jQuery

A fully responsive, mobile-friendly and infinitely looping image slider with custom controls that uses jQuery for smooth crossfade transition effects.

How to use it:

1. Include Font Awesome iconic font for the slider icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Create a list of images and insert theme together with the navigation, pagination and play/pause controls into a container.

<div class="slider_container">
  <ul>
    <li class="current_slide"><img src="1.jpg" alt="slide image"></li>
    <li><img src="2.jpg" alt="slide image"></li>
    <li><img src="3.jpg" alt="slide image"></li>
    <li><img src="4.jpg" alt="slide image"></li>
    <li><img src="5.jpg" alt="slide image"></li>
    <li><img src="6.jpg" alt="slide image"></li>
  </ul>
  
  <span class="prev_slide"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
  <span class="next_slide"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
  
  <div class="buttons"></div>
  
  <span class="play_pause"><i class="fa fa-pause"></i></span>
</div>

3. The primary CSS styles for the slider.

#container .slider_container {
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  max-width: 1000px;
  position: relative;
}

#container .slider_container ul {
  margin: 0;
  padding: 0;
}

#container .slider_container ul li {
  display: none;
  list-style: none;
}

#container .slider_container ul li img {
  width: 100%;
  display: block;
}

#container .slider_container ul li:first-child { display: block; }

4. Style and position the slider controls.

#container .slider_container .prev_slide, #container .slider_container .next_slide {
  top: 50%;
  width: 40px;
  opacity: 0.5;
  height: 40px;
  cursor: pointer;
  background: #fff;
  margin-top: -13px;
  position: absolute;
  border-radius: 20px;
}

#container .slider_container .prev_slide i, #container .slider_container .next_slide i {
  margin-top: 7px;
  font-size: 25px;
}

#container .slider_container .prev_slide .fa-angle-left, #container .slider_container .next_slide .fa-angle-left { margin-right: 4px; }

#container .slider_container .prev_slide .fa-angle-right, #container .slider_container .next_slide .fa-angle-right { margin-left: 4px; }

#container .slider_container .prev_slide { left: 16px; }

#container .slider_container .next_slide { right: 16px; }

#container .slider_container .buttons {
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  position: absolute;
}

#container .slider_container .buttons span {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  margin: 0 10px;
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  display: inline-block;
  box-sizing: border-box;
}

#container .slider_container .buttons .current_slide_counter { opacity: 1; }

#container .slider_container .play_pause {
  top: 15px;
  right: 15px;
  position: absolute;
}

#container .slider_container .play_pause i {
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
}

5. Place the main slider JavaScript file after loading jQuery library and we're done.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="main.js"></script>

---

This awesome jQuery plugin is developed by adeleke-akinade. For more Advanced Usages, please check the demo page or visit the official website.