_carousel

Getting started

Add css link to document head

<link rel="stylesheet" href="./css/_carousel.css">

Add code to document body

Make sure the class name _carousel-content is there. The top _carousel class is to initialize the carousel automatically.

<div class="_carousel">
	<div class="_carousel-content">
		<div class="selected">
		...
		</div>
		<img src="..." alt="...">
		<div>...</div>
		...
	</div>
</div>

*** If you DO NOT specify class="_carousel", you will need to initialize the carousel manually. By this, you will have init event.

<div id="exampleCarousel">
	...
</div>
...
<script src="./js/_carousel.js"></script>
<script>
	...
	let elem = document.querySelector('#exampleCarousel');
	if (elem) {
		elem.addEventListener('init', evt => {
			console.log(evt);
			//your code here
		});
		new _carousel(elem);
	}
</script>
</body>

Add javascript code before the closing body tab

...
	<script src="./js/_carousel.js"></script>
</body>

Change first selected slide

At the beginning, the first child node in _carousel-content is selected and showed up. You can try to set the first slide to any item you want by adding class selected.

<div class="... selected">...

Hide controls and indicators

You can hide the control buttons or indicators by adding data-controls and data-indicators to the main carousel tag. You can set it to 0/false/no/off/null to hide them.

<div class="_carousel" data-controls="no" data-indicators="false">...

Change transition

By default, the transition between items is slide horizontally. You can try other transitions by adding fade, parallax or no-transition class to the main carousel tag.

<div class="_carousel fade">...

Change delay time

You can change the delay time of autoplay by adding data-delay="<number in ms>" to the main carousel tag. Remember the number must be greater than 1000ms or else the autoplay is turn off (you can turn off the autoplay by setting the delay time less than 1000ms).

<div class="_carousel" data-delay="7000">...

Events

You can listen to events fired by the carousel from the main tag. Supported events are init (available when you create the carousel manually), before-transition, transition-end, drag-start, drag-move and drag-end

let elem = document.querySelector('#exampleCarousel');
if (elem) {
	elem.addEventListener('init', evt => {
		console.log(evt);
		//your code here
	});
	elem.addEventListener('before-transition', evt => {
		//your code here
	});
	elem.addEventListener('transition-end', evt => {
		console.log(evt.detail); // show the current slide index
		//your code here
	});
	//...
	new _carousel(elem);
}