Infinite Multi-slide Carousel In Pure JavaScript – elder-carousel

elder-carousel is a standalone JavaScript plugin to create a basic responsive carousel that supports multiple items per slide.

How to use it:

1. Link to the elder-carousel plugin’s files.

<link rel="stylesheet" href="dist/style.css">
<script src="dist/index.min.js"></script>

2. Add as many slides to the carousel container.

<div class="carousel-example">
  <div>
    <div class="box">1</div>
  </div>
  <div>
    <div class="box">2</div>
  </div>
  <div>
    <div class="box">3</div>
  </div>
</div>

3. Initialize the plugin to create a default carousel.

new ElderCarousel('.carousel-example');

4. Specify the number of items to show per slide. Default: 3.

new ElderCarousel('.carousel-example',{ 
    items: 2
});

5. Specify the number of items to slide at a time. Default: 1.

new ElderCarousel('.carousel-example',{ 
    step: 2
});

6. Enable/disable the infinite loop functionality. Default: true.

new ElderCarousel('.carousel-example',{ 
    infinite: false
});

7. Enable/disable the autoplay functionality. Default: false.

new ElderCarousel('.carousel-example',{ 
    play: true,
    playInterval: 3000
});

8. Set the animation speed in milliseconds. Default: 300 (ms).

new ElderCarousel('.carousel-example',{ 
    speed: 500
});

9. Enable/disable the navigation arrows. Default: true.

new ElderCarousel('.carousel-example',{ 
    navs: false
});