Responsive Image Carousel In Pure JS – easy-carousel

Preview:

Description:

easy-carousel is a pure JavaScript plugin for generating a responsive, highly configurable carousel from a group of images.

The carousel loops infinitely over images when clicking next or previous arrows. Autoplay is supported as well.

All the options can be passed via data attributes. It means that you’re able to implement multiple carousels on a page.

How to use it:

Download and insert the easy-carousel’s script just before the closing body tag.

<script src="easy-carousel-es5.min.js"></script>

Insert images to a container element and config the carousel with the following HTML data attributes:

• data-ez-view-number: The number of items per view, default: 5
• data-ez-autoscroll: Enable autoplay, default: ‘off’
• data-ez-width: The width of the carousel, default: ‘100%’
• data-ez-height: The height of the carousel, default: ‘200px’
• data-ez-bg: The background color of the carousel, default: ‘white’
• data-ez-arrow-color: The color of the navigation arrows, default: ‘black’
• data-ez-arrow-size: The arrow size, default: ‘2rem’
• data-ez-linked: Is linked, default: ‘false’
• data-ez-arrow-type: The arrow type, default: ‘1’
• data-ez-scroll: animation speed, default: ‘5000’

<div id="carousel" 
     data-ez-view-number=5 
     data-ez-autoscroll="on" 
     data-ez-width="100%" 
     data-ez-height="300px" 
     data-ez-bg="#f55353" 
     data-ez-arrow-color="white" 
     data-ez-arrow-size="3rem" 
     data-ez-linked="false" 
     data-ez-arrow-type="2" 
     data-ez-scroll-time=2000>
    <img src="1.png" data-ez-href="#">
    <img src="2.png" data-ez-href="#">
    <img src="3.png" data-ez-href="#">
    <img src="4.png" data-ez-href="#">
    <img src="5.png" data-ez-href="#">
    ...
</div>

Initialize the carousel plugin.

const carousel = new Carousel("#carousel");

Activate the carousel. That’s it.

carousel.makeCarousel();