Infinite Carousel Using JavaScript & CSS Animations – Carousel.js

Preview:

Description:

An easy-to-use JavaScript library to create an infinitely looping carousel using Vanilla JavaScript and CSS animations.

Features:

• Autoplay.
• Move images manually with left/right buttons.
• Allows to specify how many images per slide or per rotate.
• Full responsive.
• Left and right directions.

How to use it:

1. Load the Carousel.js JavaScript library in the HTML document.

<link rel="stylesheet" href="/path/to/carousel.css" />
<script src="/path/to/carousel.js"></script>

2. Add slides to the carousel interface.

<div class="carousel-container" id="example">
  <div class="carousel" >
    <div class="carousel-item">
      <div class="example-item">
        1
      </div>
    </div>
    <div class="carousel-item">
      <div class="example-item">
        2
      </div>
    </div>
    <div class="carousel-item">
      <div class="example-item">
        3
      </div>
    </div>
    <div class="carousel-item">
      <div class="example-item">
        4
      </div>
    </div>
    <div class="carousel-item">
      <div class="example-item">
        5
      </div>
    </div>  
    <div class="carousel-item">
      <div class="example-item">
        6
      </div>
    </div>
    <div class="carousel-button-next example-button">👉</div>
    <div class="carousel-button-prev example-button">👈</div>
  </div>
</div>

3. Initialize the carousel and done.

let example = new Carousel({
    id: "example"
});

4. Customize the autoplay feature.

let example = new Carousel({
    rotation: {
      amount: 1, // move x images per rotation
      timingFunction: "ease-in-out", // easing
      duration: 500, // duration
    },
});

5. Override the display settings.

let example = new Carousel({
    display: {
      number: 2, // number of items per slide,
      duration: 1000, // duration
      startOffset: 0, // offset
      direction: "left", // or 'right'
    },
});

6. Customize the control buttons.

let example = new Carousel({
    buttons: {
      hide: false, // hide controls
      disableForSingle: false, // disable the buttons when there is only one slide
    },
});

7. Customize the CSS class of slide items.

let example = new Carousel({
    class: {
      itemClassName: "carousel-item"
    },
});

8. Available options for responsiveness.

let example = new Carousel({
    fit: {
      fitToParent: false,
      fitToChildren: true,
      responsive: true,
    },
});