JSFiddle - React, Tailwind, and code Playground

by Bruno Augusto

HTML

<div id="gallery">
    
    <figure>
        <img src="http://i.imgur.com/isOuAZ9.jpg?1" />
        <figcaption>Fig1</figcaption>
    </figure>
    
    <figure class="hide">
        <img src="http://i.imgur.com/ka32JD1.jpg" />
        <figcaption>Fig2</figcaption>
    </figure>
    
    <figure class="hide">
        <img src="http://i.imgur.com/gWaNC22.jpg" />
        <figcaption>Fig3</figcaption>
    </figure>
    
    <div id="controls">
        <button type="button" id="previous"><< Previous</button>
        <button type="button" id="next">Next >></button>
    </div>
</div>

CSS

.hide { display: none; }

JavaScript

$( document ).ready( function() {

    var figures = $( 'figure' );
    
    var current = 0;
    
    $( 'button' ).on( 'click', function() {
        
        // Hiding the previous slide/image
        
        figures.eq( current ).hide();
        
        var $this = $( this );
        
        if( $this.attr('id') == 'next' ) {
            
            if( current < ( figures.length - 1 ) ) current++;
            else current = 0;
            
        } else if( $this.attr('id') == 'previous' ) {
           
            if( current > 0 ) current--;
            else current = ( figures.length - 1 );
        }
        
        // Showing the next slide/image
        
        figures.eq( current ).show();
                 
    });
});