A simple JavaScript carousel. WARNING, the project is still in development.
My main goal is to make a very simple and light carousel that I can use for my projects. There are still quite a few things that I would like to change. I used vanilla JavaScipt for the initiation and the options, and CSS for the animation.
- Link the stylesheet and the script files from the dist folder:
...
<linkrel="stylesheet" href="sand-carousel.css"></head><body>
...
<scriptsrc="sand-carousel.js"></script></body>Add the required classes
sand-carouselandslides-wrapperto the containing elements andslideclass to the carousel's items in a markup similar to the one below.Please note that the script is adding the carousel's controls in the element with the
sand-caroselclass. Bothsand-carouselandslides-wrapperclasses can be applied to one element but that might lead to semantic inconsistencies if the containing element is a list and the slides are list items as in the markup below.
<divclass="sand-carousel"><ulclass="slides-wrapper"><liclass="slide">Slide 1</li><liclass="slide">Slide 2</li><liclass="slide">Slide 3</li></ul></div>- Initiate the carousel by declaring a new instance of the
SandCarouselclass:
letcontainerSelector=".sand-carousel";letsingleSlideSelector=".slide";letslideDuration=6000;lettransitionDuration=500;// 500ms by dafaultletresizable=false;// false by defailtletautoPlay=true;// true by default// NOTE! The autoplay property in the constructor// is set to false if the slider is resizable// this.autoplay = resizable ? false : autoplayconstSAND_CAROUSEL=newSandCarousel(containerSelector,singleSlideSelector,slideDuration,transitionDuration,resizable,autoPlay);- Then call one of the methods
dotControls()orarrowControls():
SAND_CAROUSEL.dotControls();- Review of the code;
- fix the issues;
- add lazy loadgin.