Minimal Carousel With Continuous Slide - pureCarousel

A lightweight, straightforward, responsive, jQuery based carousel UI that automatically loops over the slides at a specific speed.

How to use it:

1. Add your contents to the slides as follows:

<div class="content-carousel" id="carousel">
  <div class="content first">
    <h2>Content 1</h2>
  </div>
  <div class="content second">
    <h2>Content 2</h2>
  </div>
  <div class="content third">
    <h2>Content 3</h2>
  </div>
</div>

2. Create pagination bullets that indicate the current slide, and allow the user to manually switch between slides by click. Note that for each slide must have a .button:

<div id="carouselController">
  <span class="button"></span>
  <span class="button"></span>
  <span class="button"></span>
</div>

3. The necessary CSS styles for the carousel & controls. The responsive layout is based on CSS3 flexbox.

.content-carousel {
  display: flex;
}

.content-carousel .content{
  width: 100%;
  padding-left: 0;
  transition-duration: .5s;
  position: relative;
  left: 0%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  border-radius: 1rem;
}

#carouselController {
  display: flex;
  justify-content: center;
  width: 100%;
}

#carouselController .button {
  width: 1rem;
  height: 1rem;
  margin: .5rem;
  border-radius: 50%;
  border: solid 2px #fff;
  cursor: pointer;
}

#carouselController .active {
  background-color: #666;
}

4. Load the latest jQuery JavaScript library at the end of the document.

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

5. The main JavaScript (jQuery script) to enable the carousel.

$(document).ready(function(){

  var actualSlide = 0;
  var totalSlides = $("#carousel .content").length;
  var gap = 100 / totalSlides;
  var lastSlide = $("#carousel .content").length - 1;

  $("#carousel").css("width", (100 * totalSlides) + "%");
  $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

  var slide = function(){

    if(actualSlide >= totalSlides)
      actualSlide = 0;

    $("#carouselController .button").removeClass("active");
    $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

    for (var i = 0; i < totalSlides; i++){

      if(actualSlide != totalSlides)
        $("#carousel .content:eq(" + i + ")").css(
          "left", ((gap * actualSlide) * -1) + "%"
        );
      else
      $("#carousel .content:eq(" + i + ")").css(
        "left", "0%"
      );
    }
  }

  $("#carouselController .button").on("click", function(){
    actualSlide = $(this).index();
    slide();
  });

  window.setInterval(function(){
    if(!$("#carouselContainer").is(':hover')){
      actualSlide += 1;
      slide();
    }
  }, 5000); // override the default duration here

});

---

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