JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h2>Fill 200x100</h2>
    <div cover-background-image='["http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif","http://images.wikia.com/pokemon/images/archive/4/49/20110526012846!Ash_Pikachu.png","http://images2.wikia.nocookie.net/__cb20111231185621/trigun/images/2/2b/Vash1.jpg"]' carousel-name="myWideCarousel" class="wide"></div>
    <div carousel-prev="myWideCarousel" class="pointer">Prev</div>
    <div carousel-next="myWideCarousel" class="pointer">Next</div>
</div>
<div>
    <h2>Fill 100x200</h2>
    <div cover-background-image="imgs" carousel-name="myTallCarousel" class="tall"></div>
    <div carousel-prev="myTallCarousel" class="pointer">Prev</div>
    <div carousel-next="myTallCarousel" class="pointer">Next</div>
</div>

CSS

div.wide {
    width: 200px;
    height: 100px;
    border: 1px solid orange;
}
div.tall {
    width: 100px;
    height: 200px;
    border: 1px solid orange;
}

.pointer {
    cursor: pointer;
}

JavaScript

var imgs = [
    "http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif",
    "http://fc03.deviantart.net/fs28/i/2009/250/7/4/MUSASHI_MIYAMOTO_by_BARCYD.jpg",
    "http://fc08.deviantart.net/fs71/f/2012/066/3/5/goku_happy_by_kzo-d4s20sy.png"];

$(document).ready(function () {
    $('div[cover-background-image]').each(function(i, el) {
        var ctr = -1;
        var images = eval($(el).attr('cover-background-image'));
        var name = $(el).attr('carousel-name');

        var nextImage = function() {
            ctr = (ctr + 1) % images.length;
            $(el).css({
                'background-image': 'url(' + images[ctr] + ')',
                'background-size': 'cover',
                'background-repeat': 'no-repeat',
                'background-position': 'Top Right Top Right'
            });
        };

        var previousImage = function() {
            ctr = (ctr - 1);
            if (ctr < 0) {
                ctr = images.length - 1;
            }
            $(el).css({
                'background-image': 'url(' + images[ctr] + ')',
                'background-size': 'cover',
                'background-repeat': 'no-repeat',
                'background-position': 'Top Right Top Right'
            });
        };

        $("div[carousel-next='" + name + "']").each(function (i, el) {
            $(el).click(function() {
                nextImage();
            });
        });
        $("div[carousel-prev='" + name + "']").each(function (i, el) {
            $(el).click(function() {
                previousImage();
            });
        });

        nextImage();
        var nextImageTimeout = function() {
            nextImage();
            setTimeout(nextImageTimeout, 5 * 1000);
        };
        setTimeout(nextImageTimeout, 5 * 1000);
    });
});