JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kunder.skarp.dk/skarp/scaler.js"></script>
<div id="bg" style="z-index:1">                                                    <!--Prevent scrolling on Opera, iPhone and iPad -->
    
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/sports/Dummy-Text/" /></i></i></b>        <!--b:holder, i#1: large canvas, i#2: center verticaly -->
    <b><i><i><img alt="" src="http://lorempixel.com/400/200/transport/Dummy-Text/" /></i></i></b>
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/food/Dummy-Text/" /></i></i></b>

        <b><i><i><img alt="" src="http://lorempixel.com/400/200/animals/Dummy-Text/" /></i></i></b>
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/city/Dummy-Text/" /></i></i></b>
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/fashion/Dummy-Text/" /></i></i></b>
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/people/Dummy-Text/" /></i></i></b>
        <b><i><i><img alt="" src="http://lorempixel.com/400/200/abstract/Dummy-Text/" /></i></i></b>
        
    </div>

<div class=next>Next</div>
<div class=previous>previous</div>

CSS

body,html{width:100%;height:100%;overflow:hidden;background:#000;padding:0;margin:0;border:0}

#bg,#bg *{-moz-user-select:-moz-none;-webkit-user-select:none}                                                    /*Prevent selection*/
#bg,#bg b{width:100%;height:100%;overflow:hidden;position:relative;display:block}                                /*Containers*/
#bg i{position:absolute;width:200%;height:200%;top:-50%;left:-50%;display:table}                                /*Create canvas*/
#bg i i{left:0;top:50%;width:100%;display:block;height:auto;background:url(load.gif) 50% 50% no-repeat}            /*IE center verticaly and loading-gif*/
#bg i > i{display:table-cell;vertical-align:middle;height:100%;position:static;top:0}                            /*Others center verticaly*/
#bg img{display:block;margin:0 auto;width:50%;-ms-interpolation-mode:bicubic}                                    /*Smooth anti-alising in IE*/
#bg{position:absolute;left:0;bottom:0}                                                                            /*Position preventing scrolling-bug in opera*/
*+html #bg i i{position:absolute;top:50%;height:auto}                                                            /*IE7  fix centerer*/
*+html #bg img{position:relative;top:-50%}                                                                        /*IE7  fix image*/
* html #bg img{height:50%;position:relative;top:-50%}                                                            /*IE6  fix image*/

.next, .previous { background:red; border:2px solid white; color:white; font-size:25px; position:absolute; z-index:20; bottom:0}

.next {right:0}
.previous {left:0}

JavaScript

(function(){
    var scaler=Scaler('bg'),els=$('#bg').children(),width=100/els.length;
    var float=$('<span />').css({position:'absolute',color:'#fff',cursor:'pointer',zIndex:2});
    var div=$('<div/>').css({position:'absolute',left:0,bottom:0,marginRight:-20,height:'100%'});
    div.width(els.css({float:'left',width:width+'%'}).length+'00%').append(els);

    var move=function(e){
            float[0].style.left=(e=e||window.event).clientX+20+'px';
            float[0].style.top=e.clientY+20+'px';
            if(float[0].nxt!=(e.clientX>(document.body.offsetWidth/2)))float[0].innerHTML=(float[0].nxt=!float[0].nxt)?'next':'previous';   //Change html only if needed
        },
        swap=function(e){
            var key=e.type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
            if(key>36&&key<41)div.animate({left:(scaler(key>38?'+1':'-1').to*-1)+'00%'});   //swap with animation
        }

    $(window).bind('keydown',swap);
    $('#bg').bind('mousemove',move).bind('click',swap).css('cursor','pointer').append(div,float);

    /*$('#bg').cycle({ //if using jquery.cycle-plugin the window resizing won't behave too good - fixable
        timeout:2000,
        after:function(a,b,c){scaler(c.currSlide)}, //but this part is important - scale the current photo
        fx:'scrollLeft'
    });*/
})();