JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<a href="#" class="prevImageBtn" id="prev" title="prev">prev</a> 
<a href="#" class="nextImageBtn" id="next" title="next">next</a>

<div id="someId"><img src="http://akdes.eu/jsfiddle/x.jpg" width="200px" id="bigImg" /></div>
<div id="thumbs">
    <div class="item" data-src="http://akdes.eu/jsfiddle/1.jpg">
        <img src="http://akdes.eu/jsfiddle/1.jpg" />
    </div>
    <div class="item" data-src="http://akdes.eu/jsfiddle/2.jpg">
        <img src="http://akdes.eu/jsfiddle/2.jpg" />
    </div>
    <div class="item" data-src="http://akdes.eu/jsfiddle/3.jpg">
        <img src="http://akdes.eu/jsfiddle/3.jpg" />
    </div>
    <div class="item" data-src="http://akdes.eu/jsfiddle/4.jpg">
        <img src="http://akdes.eu/jsfiddle/4.jpg" />
    </div>
</div>

JavaScript

$(document).ready(function()
{
    var imageIndex = 0;
    
    $('#thumbs .item').click(function()
    {
        var url = $(this).attr('data-src');
        $('#bigImg').attr('src', url);
        imageIndex = $(this).index();
    });
    
    $('#prev').click(function(event)
    {
        event.preventDefault();
        
        imageIndex -= 1;
        
        if (imageIndex < 0) {
            imageIndex = $('#thumbs .item').length - 1;
        }
        
        $('#thumbs .item')[imageIndex].click();
    });
    
    $('#next').click(function(event)
    {
        event.preventDefault();
        
        imageIndex += 1;
        
        if (imageIndex == $('#thumbs .item').length) {
            imageIndex =  0;
        }
        
        $('#thumbs .item')[imageIndex].click();
    });
});