Responsive Infinite Carousel with jQuery and CSS3

A fully responsive jQuery carousel slider which allows you to infinitely loop through a set of Html contents with CSS3 transitions and transforms.

How to use it:

1. Include the necessary jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. Include the jQuery transit plugin after jQuery library to help you do CSS3 transformations and transitions in jQuery.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>

3. Create a carousel slider following the Html structure like this:

<div class="wrapper">
  <div class="carousel">
    <div class="carousel__content">
      <div class="item">
        <p class="title">First</p>
        <img src="1.jpg" alt=""> </div>
      <div class="item">
        <p class="title">Second</p>
        <img src="2.jpg" alt=""> </div>
      <div class="item">
        <p class="title">Third</p>
        <img src="3.jpg" alt=""> </div>
    </div>
    <div class="carousel__nav"> <a href="#" class="nav nav--left">Previous</a> <a href="#" class="nav nav--right">Next</a> </div>
  </div>
</div>

4. The required CSS styles for the carousel slider.

.carousel {
  width: 100%;
  position: relative;
}

.carousel .carousel__content {
  width: auto;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
}

.carousel .carousel__content .item {
  display: block;
  float: left;
  width: 100%;
  position: relative;
}

.carousel .carousel__content .item .title {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -33px 0 0 0;
  padding: 0;
  font-size: 3rem;
  width: 100%;
  text-align: center;
 letter-spacing: .3rem;
  color: #FFF;
}

.carousel .carousel__content .item .title--sub {
  margin-top: 20px;
  font-size: 1.2em;
  opacity: .5;
}

.carousel .carousel__content .item img {
  width: 100%;
  max-width: 100%;
  display: block;
}

.carousel .carousel__nav {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -17px;
  left: 0;
  z-index: 1;
}

.carousel .carousel__nav .nav {
  position: absolute;
  top: 0;
  color: #000;
  background: #FFF;
  padding: 8px 12px;
  font-weight: bold;
  text-decoration: none;
 font-size: .8rem;
  transition: padding .25s ease;
}

.carousel .carousel__nav .nav:hover { padding: 8px 20px; }

.carousel .carousel__nav .nav--left { border-radius: 0px 3px 3px 0px; }

.carousel .carousel__nav .nav--right {
  right: 0;
  border-radius: 3px 0px 0px 3px;
}

5. You can also add an extra CSS to the wrapper to show the items outside the wrapper.

<div class="wrapper wrapper--demo">

<style>
.wrapper--demo { overflow: visible; }

.wrapper--demo:after,
.wrapper--demo:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 2;
}

.wrapper--demo:before { left: -800px; }
</style>

6. The Javascript to enable the responsive infinite carousel.

(function() {
  var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;

  carouselContent = $(".carousel__content");

  carouselIndex = 0;

  carouselLength = carouselContent.children().length;

  isAnimating = false;

  itemWidth = 100 / carouselLength;

  firstItem = $(carouselContent.children()[0]);

  lastItem = $(carouselContent.children()[carouselLength - 1]);

  firstClone = null;

  lastClone = null;

  carouselContent.css("width", carouselLength * 100 + "%");

  carouselContent.transition({
    x: "" + (carouselIndex * -itemWidth) + "%"
  }, 0);

  $.each(carouselContent.children(), function() {
    return $(this).css("width", itemWidth + "%");
  });

  $(".nav--left").on("click", function() {
    if (isAnimating) {
      return;
    }
    isAnimating = true;
    carouselIndex--;
    if (carouselIndex === -1) {
      lastItem.prependTo(carouselContent);
      carouselContent.transition({
        x: "" + ((carouselIndex + 2) * -itemWidth) + "%"
      }, 0);
      return carouselContent.transition({
        x: "" + ((carouselIndex + 1) * -itemWidth) + "%"
      }, 1000, "easeInOutExpo", function() {
        carouselIndex = carouselLength - 1;
        lastItem.appendTo(carouselContent);
        carouselContent.transition({
          x: "" + (carouselIndex * -itemWidth) + "%"
        }, 0);
        return isAnimating = false;
      });
    } else {
      return carouselContent.transition({
        x: "" + (carouselIndex * -itemWidth) + "%"
      }, 1000, "easeInOutExpo", function() {
        return isAnimating = false;
      });
    }
  });

  $(".nav--right").on("click", function() {
    if (isAnimating) {
      return;
    }
    isAnimating = true;
    carouselIndex++;
    return carouselContent.transition({
      x: "" + (carouselIndex * -itemWidth) + "%"
    }, 1000, "easeInOutExpo", function() {
      isAnimating = false;
      if (firstClone) {
        carouselIndex = 0;
        carouselContent.transition({
          x: "" + (carouselIndex * -itemWidth) + "%"
        }, 0);
        firstClone.remove();
        firstClone = null;
        carouselLength = carouselContent.children().length;
        itemWidth = 100 / carouselLength;
        carouselContent.css("width", carouselLength * 100 + "%");
        $.each(carouselContent.children(), function() {
          return $(this).css("width", itemWidth + "%");
        });
        return;
      }
      if (carouselIndex === carouselLength - 1) {
        carouselLength++;
        itemWidth = 100 / carouselLength;
        firstClone = firstItem.clone();
        firstClone.addClass("clone");
        firstClone.appendTo(carouselContent);
        carouselContent.css("width", carouselLength * 100 + "%");
        $.each(carouselContent.children(), function() {
          return $(this).css("width", itemWidth + "%");
        });
        return carouselContent.transition({
          x: "" + (carouselIndex * -itemWidth) + "%"
        }, 0);
      }
    });
  });

}).call(this);

---

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