Responsive Image Carousel In Pure JS – easy-carousel

Category: Javascript , Slider | June 8, 2018
Author:arkonique
Views Total:929 views
Official Page:Go to website
Last Update:June 8, 2018
License:MIT

Preview:

Responsive Image Carousel In Pure JS – easy-carousel

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();

You Might Be Interested In:


Leave a Reply