Lightweight JavaScript Carousel

May 13, 2017

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:

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 →


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="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
	<div class="siema-next"></div>


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', () =>;


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-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-next:hover {
	opacity: 1;

Would you use this carousel plugin yourself?