JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<div class="box">
<ul>
<li><img src="http://placehold.it/300x200/e6e6e6/333&text=Image+1!" /></li>
<li><img src="http://placehold.it/300x200/6e6e6e/fff&text=Image+2!" /></li>
<li><img src="http://placehold.it/300x200/ababab/eee&text=Image+3!" /></li>
<li><img src="http://placehold.it/300x200/d7d7d7/333&text=Image+4!" /></li>
</ul>
</div>
    
    <button id="next">next</button>
    <button id="prev">prev</button>

CSS

.box { width: 300px; height: 200px; background: #bada55; outline: 1px solid red; position: relative; overflow: hidden; margin: 50px auto; }

.box img { position: absolute; top: 200px; left: 0; display: none; }
.box li:first-child img { top: 0px; display: block; }

JavaScript

$("#next").on("click", function() {
    
    var $visible = $(".box img:visible");
    
    $visible.animate({ top : 200 }, 300, function() {
        $(this).hide();            
    });   
    
    if ( $visible.parent().is(":last-child") ) {
        $visible
            .parent()
            .siblings()
            .first()
            .find('img')
            .show()
            .animate({
                top : 0
            }, 300 );        
    } else {
        
        $visible
            .parent()
            .next()
            .find('img')
            .show()
            .animate({
                top : 0
            }, 300 );
    }
              
});
    
$("#prev").on("click", function() {
    
    $(".box img:visible").animate({ top : 200 }, 300, function() {
        $(this).hide();            
    });   

    $(".box img:visible")
        .parent()
        .prev()
        .find('img')
        .show()
        .animate({
            top : 0
        }, 300 );
  
    
    
});