JSFiddle - React, Tailwind, and code Playground

by brunolm

HTML

<div id="Pagination" style="clear:both">
    <a id="Prev" href="javascript:;">« prev</a>
    <span id="Page">[1 of 5]</span>
    <a id="Next" href="javascript:;">» next</a>
</div>

<div id="Gallery">
<img alt="img01" src="http://sstatic.net/so/img/offline-ide-1.png" />
<img alt="img02" src="http://sstatic.net/so/img/offline-ide-2.png" style="display: none" />
<img alt="img03" src="http://sstatic.net/so/img/offline-ide-3.png" style="display: none" />
<img alt="img04" src="http://sstatic.net/so/img/offline-ide-4.png" style="display: none" />
<img alt="img05" src="http://sstatic.net/so/img/offline-ide-5.png" style="display: none" />
</div>

CSS

#Gallery
{
    position: relative;
}

#Gallery > img
{
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$("#Pagination a").click(function (e) {
    e.preventDefault();
    
    var $this = $(this);
    
    var $pagination = $("#Pagination");
    
    var $gallery = $("#Gallery");
    var $images = $gallery.find("img");
    
    /* Total of images */
    var total = $images.length;
    
    /* Current image index */
    var current = $pagination.data("Current") ? $pagination.data("Current") : 0;
    
    /* handling prev & next buttons */
    if ($this.index() == 0) /* Previous */
    {
        /* go 1 back or start at the end */
        current = ((current - 1) < 0 ? (total - 1) : (current - 1));
    }
    else /* Next */
    {
        /* go 1 forward or start at the beginning */
        current = ((current + 1) == total ? 0 : (current + 1));
    }
    
    /* Save the current index for next time */
    $pagination.data("Current", current);
    
    /* Update which image is visible and the label */
    $images.css("display", "none").eq(current).css("display", "");
    $("#Page").text("[" + (current+1) + " of " + total + "]");
});