JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="gallery">
    <img src="http://i.imgur.com/SfzW1.jpg" class="abs pic1" />
    <img src="http://i.imgur.com/hsVyi.jpg" class="abs pic2" />
    <img src="http://i.imgur.com/RJVm9.jpg" class="abs pic3" />
    <img src="http://i.imgur.com/dw00y.jpg" class="abs pic4" />
</div>

CSS

#gallery{
    position: relative;
}

img {
    display:none;
    width: 200px;
    height: 100px;
    z-index:0;
}


.pic1{
    display:inline;
}
.abs{
    position: absolute;
    top:0;
    left:0;
}

JavaScript

$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 4,
value: 1,
slide: function( event, ui ) {
    var pic_num = ui.value;
    var new_image_elm = $("#gallery img.pic"+pic_num);
    var old_image_elm = $("#gallery img:visible");

    if(new_image_elm != null){
        var zIndex = parseInt(old_image_elm.css('z-index'));
        new_image_elm.css('z-index', zIndex+1);        
        new_image_elm.fadeIn( "slow", function() {
            // Animation complete
            old_image_elm.hide();
        });         
    }
}
});