Lightweight JavaScript Carousel

There are plenty of fully fledged jQuery carousel plugins (Slick being my favorite). But sometimes you don't need jQuery, and in that case there are fewer options. In the past I have used:

• https://github.com/wilddeer/Peppermint
• https://github.com/thebird/Swipe (not maintained anymore)
• https://github.com/lyfeyaj/swipe (the continuation of original Swipe.js)

As part of my daily technology watch, I force myself to see if there's something new out there worth a try. I recently stumbled upon a project called Siema which seems to be a great alternative to the carousels mentioned above.

Despite being fairly new, it seems really promising, highly maintained and offers lots of options and a well-designed API. More modern than the other carousel plugins mentioned above, it does not support IE7+ which is in my opinion a good thing (Microsoft announced the end of support for Internet Explorer).

Demo here →

HTML

Very simple markup. Please note that the previous and next buttons are not mandatory.

<div class="siema-wrap">
	<div class="siema-prev"></div>
	<div class="siema">
		<img src="http://lorempixel.com/640/480/city" alt="">
		<img src="http://lorempixel.com/640/480/food" alt="">
		<img src="http://lorempixel.com/640/480/nature" alt="">
		<img src="http://lorempixel.com/640/480/nightlife" alt="">
		<img src="http://lorempixel.com/640/480/sports" alt="">
	</div>
	<div class="siema-next"></div>
</div>

JavaScript

Initializing the carousel could not be easier.

const mySiema = new Siema();
document.querySelector('.siema-prev').addEventListener('click', () => mySiema.prev());
document.querySelector('.siema-next').addEventListener('click', () => mySiema.next());

CSS

Let's spcice things up and style the carousel. Please note that I don't use base64 encoding for the SVG icon. Here is why.

.siema-wrap {
	position: relative;
}

.siema-prev,
.siema-next {
	width: 4em;
	height: 4em;
	opacity: .25;
	transition: 200ms opacity ease-out;
	position: absolute;
	top: 50%;
	margin-top: -2em;
	cursor: pointer;
	text-indent: -9999em;
	/* SVG icon encoded using data-uri */
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NzcuMTc1IDQ3Ny4xNzUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48cGF0aCBkPSJNMTQ1LjE4OCAyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMgNS4zLTEzLjggMC0xOS4xcy0xMy44LTUuMy0xOS4xIDBsLTIyNS4xIDIyNS4xYy01LjMgNS4zLTUuMyAxMy44IDAgMTkuMWwyMjUuMSAyMjVjMi42IDIuNiA2LjEgNCA5LjUgNHM2LjktMS4zIDkuNS00YzUuMy01LjMgNS4zLTEzLjggMC0xOS4xbC0yMTUuNC0yMTUuNXoiIGZpbGw9IiM1YmFkZjAiLz48L3N2Zz4=') 50%/contain no-repeat;
}

.siema-prev {
	left: -5em;
}

.siema-next {
	right: -5em;
	/* Flip horizontaly */
	transform: scaleX(-1);
}

.siema-prev:hover,
.siema-next:hover {
	opacity: 1;
}

Would you use this carousel plugin yourself?