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:
... <link rel="stylesheet" href="sand-carousel.css"> </head> <body> ... <script src="sand-carousel.js"></script> </body>
Add the required classes
slides-wrapperto the containing elements and
slideclass 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
slides-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.
<div class="sand-carousel"> <ul class="slides-wrapper"> <li class="slide">Slide 1</li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> </div>
- Initiate the carousel by declaring a new instance of the
let containerSelector = ".sand-carousel"; let singleSlideSelector = ".slide"; let slideDuration = 6000; let transitionDuration = 500; // 500ms by dafault let resizable = false; // false by defailt let autoPlay = true; // true by default // NOTE! The autoplay property in the constructor // is set to false if the slider is resizable // this.autoplay = resizable ? false : autoplay const SAND_CAROUSEL = new SandCarousel(containerSelector, singleSlideSelector, slideDuration, transitionDuration, resizable, autoPlay);
- Then call one of the methods
- Review of the code;
- fix the issues;
- add lazy loadgin.