Basic Continuous Image Carousel With jQuery

A continuous image carousel (aka slider) is a great way to showcase multiple images, content, and more on your website.

Creating a slider is a fairly simple task. We're going to use jQuery to create one today that can handle any amount of images you throw at it.

How to use it:

1. Insert a list of images to the slider.

<div id="slider">
  <ul>
    <li><img src="1.jpg" alt="Image Alt" /></li>
    <li><img src="2.jpg" alt="Image Alt" /></li>
    <li><img src="3.jpg" alt="Image Alt" /></li>
    <li><img src="4.jpg" alt="Image Alt" /></li>
    <li><img src="5.jpg" alt="Image Alt" /></li>
  </ul>
</div>

2. Add next/prev control buttons to the slider.

<p id="links">
  <a href="#" id="previous">Prev</a>
  <a href="#" id="next">Next</a>
</p>

3. Load the needed jQuery library and jQuery easing plugin (for easing functions) in the document.

<script src="/path/to/cdn/jquery.min.js" defer></script>
<script src="/path/to/jquery.easing.min.js" defer></script>

4. Main CSS styles for the slider & controls.

/* Core Styles */
#slider {
  width:400px;
  overflow:hidden;
  border: 10px solid #4C4C4C;
  height:266px;
  position:relative;
  margin:auto;
}

#slider ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}

#slider ul li img {
  display: block;
}

/* Control Styles */
#links {
  width:420px;
  display: flex;
  margin: 0 auto;
}

#links a {
  display:block;
  width:210px;
  background:#6C0204;
  height:50px;
  line-height:50px;
  color:#D5D5D5;
  text-decoration:none;
  text-align:center;
}

#links a:hover {
  background:#A51D1F;
  color:#fff;
}

5. The core JavaScript (jQuery script) to activate the slider.

$(window).on('load', function() {
  "use strict";
  const imageCount = $('#slider ul li').length;
  const imageWidth = $('#slider ul li img').first().width();
  const totalWidth = (imageWidth * imageCount) + 'px';
  let leftPosition = 0;
  let counter = 0;
  $('#slider ul').css('width', totalWidth);

  // next button
  $('#next').click(function() {
    counter++;
    if (counter === imageCount) {
      $('#slider ul').clone().appendTo('#slider');
      $('#slider ul').last().css('left', imageWidth + 'px');

      leftPosition = `-${totalWidth}`;

      $('#slider ul').last().animate({
        left: 0
      }, 700, 'easeInQuad');
      $('#slider ul').first().animate({
        left: leftPosition
      }, 700, 'easeInQuad', function() {
        $('#slider ul').first().remove();
      });
      counter = 0;
    } else {
      leftPosition = `-${counter * imageWidth}px`;
      $('#slider ul').animate({
        left: leftPosition
      }, 700, 'easeInQuad');
    }
  });

  // previous button
  $('#previous').click(function() {
    counter--;
    if (counter < 0) {
      counter = imageCount - 1;
      $('#slider ul').clone().appendTo('#slider');
      $('#slider ul').last().css('left', `-${totalWidth}`);
      leftPosition = `-${counter * imageWidth}px`;
      $('#slider ul').last().animate({
        left: leftPosition
      }, 700, 'easeInQuad');
      $('#slider ul').first().animate({
        left: imageWidth + 'px'
      }, 700, 'easeInQuad', function() {
        $('#slider ul').first().remove();
      });
    } else {
      leftPosition = `-${counter * imageWidth}px`;
      $('#slider ul').animate({
        left: leftPosition
      }, 700, 'easeInQuad');
    }
  });
});

---

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