JSFiddle - React, Tailwind, and code Playground

by IronFlare

HTML

<input type="button" value="Start" id="btn">
<input type="button" value="Stop" id="btn2">


<div class="image_slider" id="splashbox">
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                    <div id="image_rotator">
                        <div id="left"></div>
                        <div id="right"></div> 
                            <div id="slider">
                                <div class="slide">
                                    <img src="https://secure.static.tumblr.com/e169092f686b2b389018481ed7c1e8e7/zzxtd8w/YXgn2riev/tumblr_static_cara-delevingne-photo-gallery.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
                                    <img src="http://www.fashionadexplorer.com/l-uWuwhe7PcklVQMZV.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
                                    <img src="https://lisalaskar.files.wordpress.com/2012/08/caroline-t-vogue-usa-9-12-vogue-120.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
                                    <img src="http://media.tumblr.com/tumblr_mdedee3Ux51r0xemf.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
                                    <img src="http://31.media.tumblr.com/5fb671c743f6dbd9e751fee62c833d05/tumblr_n7vxkrxW7F1r79qbvo1_1280.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
                                    <img src="http://media.tumblr.com/a47254c07e7c1e938b0dfe3840a7bccb/tumblr_muq5umNDg81r5clboo4_1280.jpg" height="auto" width="1190px">
                                </div>
                                <div class="slide">
 ...

CSS

.image_slider {
                position:relative;
                width:950px;
                height:430px;
                top:0;
                left:0;
                right:0;
                margin-top:20px;
                margin-left:auto;
                margin-right:auto;
                background-color:transparent;
            }

            #image_rotator {
                position:relative;
                overflow:hidden;
                width:950px;
                height:430px;
                margin-left:auto;
                margin-right:auto;
            }
            
            #slider {
                position:absolute;
                width:99999px;
                height:430px;
                left:0; 
            }
            
            .slide {
                float:left;
                width:950px;
                height:430px;
                background:#eee;
            }

            #left {
                position:absolute;
                float:left;
                z-index:1;
                width:30px;
                height:30px;
                top:0;
                left:0;
                margin-top:210px;
                margin-left:30px;
                border:none;
                background-image:url('http://static.tumblr.com/gftilil/5A8nd93zh/arrow-97-32.png');
                background-size:100%;
            }   

            #left:hover {
                cursor:pointer;
            }

            #right {
                position:absolute;
                float:right;
                z-index:1;
                width:30px;
                height:30px;
                top:0;
                right:0;
                margin-top:210px;
                margin-right:30px;
                border:none;
                background-image:url('http://static.tumblr.com/gftilil/jQbnd941h/arrow-32-32.png');
                background-size:100%;
            }

            #right:hover {
                cursor:pointer;
       ...

JavaScript

var W = $('#image_rotator').width(),
    N = $('#slider .slide').length,
    C = 0,
    intv;

if (N <= 1) $('#left, #right').hide();
$('#slider').width(W * N);

$('#left, #right').click(function() {
    C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
    $('#slider').stop().animate({
        left: -C * W
    }, 300, function() {
        if (C == 2){alert("3rd");}
        if (C == 10) {
            $('#slider').css("left", "0");
            $('#right').click();
        }
    });
});


function setResetInterval(e) {

    var intv = $("#slider");
    if (e) {
        timer = setInterval(function() {
            $('#right').click();
        }, 1000);
    } else {
        clearInterval(timer);
    }

    $('#slider').click(function() {
        var x = $('#slider').offset();
        alert("Top: " + x.top + " Left: " + x.left);
    });
}

$("#btn").click(function(e) {
    e.preventDefault();
    setResetInterval(true);
});
$("#btn2").click(function(e) {
    e.preventDefault();
    setResetInterval(false);
});
$('#slider').hover(function(e) {
    return e.type == 'mouseenter' ? setResetInterval(false) : setResetInterval(true);
});