JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="galleries">Gallery 1</div>
<div class="galleries">Gallery 2</div>
<div class="galleries">Gallery 3</div>
<div class="galleries">Gallery 4</div>
<div class="galleries">Gallery 5</div>

<a href="#" id="previous_link">Previous</a>
<a href="#" id="show_next_gallery">Next</a>

JavaScript

$('div.galleries:not(:first)').hide();
    $('#previous_link').hide();
    $('#show_next_gallery, #previous_link').click(function(e) {		
		e.preventDefault();		
		var currentIdx = parseInt($('div.galleries:visible').index('div.galleries'), 10);
		var nextIdx = ($(e.target).is('#show_next_gallery')) ? currentIdx + 1 : currentIdx - 1;
        
        if ((nextIdx + 1) == $('div.galleries').length) {
          $('#show_next_gallery').hide();   
        } else {
          $('#show_next_gallery').show();   
        }
        
        if (nextIdx == 0) {
         $('#previous_link').hide();   
        } else {
         $('#previous_link').show();   
        }
		
		$('div.galleries:eq(' + currentIdx + ')').hide();
		$('div.galleries:eq(' + nextIdx + ')').show();
		
	});