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:
...
<link rel="stylesheet" href="sand-carousel.css">
</head>
<body>
...
<script src="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.
<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
SandCarouselclass:
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
dotControls()orarrowControls():
SAND_CAROUSEL.dotControls();- Review of the code;
- fix the issues;
- add lazy loadgin.