JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div id="slideshow">
    <div id="slider">
        <img src="http://dummyimage.com/600x430/f0f/fff">
        <img src="http://dummyimage.com/600x430/ccc/fff">
        <img src="http://dummyimage.com/600x430/ff5/fff">
        <img src="http://dummyimage.com/600x430/666/fff">
    </div>
</div>


<div id="test" style="position:relative;margin:5px auto;width:240px;z-index:10;background:#cf5;"></div>

CSS

*{margin:0;padding:0;}
#slideshow{
    position:relative;
    margin:0 auto;
    clear:left;
    width:600px;
    height:430px;
    overflow-x:auto;
    overflow-y:hidden;
}
#slider img{
    position:relative;
    float:left;
    margin:0px;
    padding:0px;
}

#slider{
    position:relative;
    color:#7a8523;
}

JavaScript

// Horizontal autoSlider gallery
// by roXon (06.08.2011.)
// roko.cb&gmail*com


    var iw = $('#slider img').width();
    var iN = $('#slider img').length;
    var counter = 1; // set counter to first image.  
    var interv;

    $('#slider').width(iw * iN);

    function start() {
        interv = setTimeout(function() {
            counter++;
            if (counter === (iN + 1)) {
                counter = 1;
            }
            $('#slideshow').stop().animate({scrollLeft: iw * (counter - 1)}, 1000, function() {
                start();
            });
        }, 2000);
    }
    start();

    $('#slideshow').scroll(function() {
        var sp = $('#slideshow').scrollLeft();
        counter = (Math.abs((sp / iw) + 1).toFixed(0));
        $('#test').html(counter);
    });

    $('#slideshow').bind('mouseover mouseout', function(e) {
        if (e.type === 'mouseover') {
            clearTimeout(interv);
            $('#test').html('Stop on mouseover');
        } else {
            $('#slideshow').animate({scrollLeft: iw * (counter - 1)}, 1000);
            start();
        }
    });