carousel-slideshow-js

Infinite Carousel Slideshow Pure Javascript Library

by

Carousel.js is an easy-to-use JavaScript library to create an infinite carousel-slideshow loop using Vanilla JavaScript and CSS animations.

Features:

  • auto start.
  • Transfer photos manually using the left / right buttons.
  • Allows you to specify the number of images per slide or per rotation.
  • Full response.
  • Left and right directions.

How to make use of it:

1. Load the Carousel.js JavaScript library within the HTML doc.

<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 accomplished it.

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

4. Customize the autoplay function.

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

5. Override the show 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 management 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 objects.

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

8. Available choices for responsiveness.

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

Infinite Carousel Using JavaScript & CSS Animations, Carousel.js Plugin/Github

See Demo And Download

Demo
Download

Official Website(wkelly1): Click Here

This superior jQuery/javascript plugin is developed by wkelly1. For extra Advanced Usages, please go to the official website.

Leave a Comment