JSFiddle - React, Tailwind, and code Playground

by gchristman

HTML

<div id="gallery">
    <img data-rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" src="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png" style="max-width:150px;max-height:50px"/>
    
    <img data-rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" src="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg" style="max-width:150px;max-height:50px"/>
    
    <img data-rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" src="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg" style="max-width:150px;max-height:50px"/>
    
    <img data-rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" src="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg" style="max-width:150px;max-height:50px"/>
</div>

<div id="area">test</div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>

CSS

#button-previous {float:left;}
#button-next {float:right;}
img{border:1px solid #000}
img.active{border-color:red}

JavaScript

$("#gallery img").first().load(function(){
    activeImg($(this));
});

$("#gallery img").on('click, mouseover', function(){
    activeImg($(this));
});

$('#button-next').click(function(){    
    var isLast = $('#gallery img.active').is(':last-child');
    
    if (isLast) {
        activeImg($('#gallery img').first());
    } else {
        activeImg($('#gallery img.active').next());            
    }          
});

$('#button-previous').click(function(){    
    var isFirst = $('#gallery img.active').is(':first-child');
    
    if (isFirst) {
        activeImg($('#gallery img').last());
    } else {
        activeImg($('#gallery img.active').prev());            
    }          
});

var activeImg = function($img) {
    $('.active').removeClass('active');
    
    var imgUrl = $img.addClass('active').data('rel');        
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
    
};