JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<div id="carousel">
    <img src="http://placehold.it/100x100/37c" />
    <img src="http://placehold.it/100x100/fc0" />
    <img src="http://placehold.it/100x100/037" />
</div>

CSS

* {
    padding: 0;
    margin: 0;
}

#carousel {
    overflow: hidden;
    position: relative;
    height: 100px;
    width: 100px;
}

#pane {
    position: absolute;
    top: 0;
    left: 0;
}

#carousel img {
    display: none;
    float: left;
}

#carousel img:first-child {
    display: block;
}

JavaScript

(function($) {

    var methods = {
        init: function(options) {
            var pane = $('<div id="pane" />');
            var paneWidth = 0;
            var paneHeight = 0;
            $(this).find('img').each(function() {
                paneWidth += $(this).width();
                paneHeight = (paneHeight > $(this).height()) ? paneHeight : $(this).height();
            });
            pane.css({
                width: paneWidth + 'px',
                height: paneHeight + 'px'
            });
            pane.html($(this).html());
            $(this).html('').append(pane);
            // set the width of the carousel
            $(this).width($(this).find('img:eq(0)').width() + 'px');
            $(this).find('img').show();
        }
    }

    $.fn.slider = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }

    };
})(jQuery);

$('#carousel').slider();
$('#pane').css({left: -100 + 'px'});