Easy Carousel Plugin - A just add water carousel plugin for js
Both es5 and es6 versions are provided in this package.
Just download this repository and include the js file of your choice in the body's script tag. That's it.
Make a container for your carousel, and put all your image tags in there. Set whatever parameters you want in the data attributes, and you are done.
<div id="carousel" data-ez-view-number=5 data-ez-autoscroll="on" data-ez-width="100%" data-ez-height="200px" data-ez-bg="#444" data-ez-arrow-color="white" data-ez-arrow-size="3rem" data-ez-linked="true"> <img src="..."> <img src="..."> . . . </div>
Make a Carousel object using
new Carousel(<selector of the carousel container>); and then call the object method
makeCarousel() which does all the work for you.
const carousel = new Carousel("#carousel"); carousel.makeCarousel();
(You can replace the const with var if you want support for older browsers and are not using atranspiler such as Babel).
The Carousel constructor takes default "#carousel" as the selector. So if you have named your carousel container with an id of
carousel, then you can just initialise the carousel by -
const carousel = new Carousel(); carousel.makeCarousel();
That is all you need to get going
There are many options provided to customise your carousel. More features will be added later on. You can change these options by setting their values in the data attributes of your carousel element.
||Specify the number of images to display on one slide of the carousel||5||Integer|
||Specify the width of the carousel output||100%||Any CSS Size Unit|
||Specify the height of the carousel output||200px||Any CSS size unit|
||Specify the colour of the controller buttons||black||Any CSS color type|
||Specify the size of the controller arrows||2rem||Any CSS size unit|
||Specify the background colour of the carousel||white||Any CSS color type|
||Specify whether the carousel will scroll through the list automatically||off||off/on|
||Specify the time interval for a slide change||5000||Time in miliseconds|
||Specify the type of arrow to be used in the buttons (different types are listed below)||1||any number in 1-10|
||Specify whether the images being displayed will have links to some website||false||true/false|
- Basic Arrow -
data-ez-arrow-type=1← → (Default)
- Dotted arrow -
- Small single angle arrow -
- Small double angle arrow -
- Big double dashed arrow open -
- Zigzag arrow -
- Big double dashed arrow closed -
- Open headed arrow -
- Curved arrow -
- Big single angle arrow -
data-ez-linked is set to true then a data attribute
data-ez-href will have to be added to all the images in the carousel which will contain the link of the webpage that the image is linked to.
<div id="carousel" data-ez-view-number=5 data-ez-autoscroll="on" data-ez-width="100%" data-ez-height="200px" data-ez-bg="#444" data-ez-arrow-color="white" data-ez-arrow-size="10%" data-ez-linked="true"> <img src="..." data-ez-href="..."> <img src="..." data-ez-href="..."> . . . </div>
Features to be added
As mentioned in the previous section, some options are in production which have not been implemented yet. Other than that some other features will also be added -
- CSS + JS based version of the library
- CSS + Jquery based version of the library
- Jquery based version of the library
Auto Scroll Feature
Linked Images (In production)
- Support for all kinds of images
Option to change arrow type