Lightweight JavaScript Carousel

May 13, 2017
JavaScript

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 on About page →

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?

comments powered by Disqus
Want a beautiful and engaging website for your business? Check out YOSA Digital×