JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="panel8" class="panels" style=" z-index: 62">
	<div class="slider">
		<div class="pictures"><img src="http://i.imgur.com/hZfcYNw.jpg"></div>
		<div class="pictures"><img src="http://i.imgur.com/PFkzdOd.jpg"></div>
		<div class="pictures"><img src="http://i.imgur.com/yyjdlgQ.jpg"></div>
	</div>
            <div class="caption">Caption</div>
<div class="nav">
	<div id="previous" style=" cursor: pointer">PREV</div>
	<span>|</span>
	<div id="next" style=" cursor: pointer">NEXT&nbsp;</div>
</div>
</div>

CSS

.panels {
	position: absolute;
}

#panel8 {
	width: 360px;
	height: 180px;
}

.panels > .caption{
    margin-top: -28px; 
    position: absolute;
    padding: 4px 20px 4px 20px;
    background-color: rgba(255, 255, 255, 0.6);
}

.pictures {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 100%;
}

.slider {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.nav {
	width: 100%;
	height: 20px;
	color: #000;
	font-family: Monospace;
	font-size: 9px;
	text-align: right;
	line-height: 20px;
	position: absolute;
	bottom: 0;
}

#previous {
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

#next {
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

span {
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
}

JavaScript

$(document).ready(function(){
    $('.pictures').first().addClass('current').css({left: 0});
    $('.panels > .caption').html($('.pictures').first().find("img")[0].src);

    $('#next').click(function(){
        var old = $('.current').removeClass('current');  
        if ( old.is(':last-child')) {
            old.animate({left: "-100%"});
            $('.pictures').first().css({left: "100%"}).addClass('current').animate({left: 0});
            $('.panels > .caption').html($('.pictures').first().find("img")[0].src);
        }else{
           old.animate({left: "-100%"});
           old.next().css({left: "100%"}).addClass('current').animate({left: 0});
           $('.panels > .caption').html(old.next().find("img")[0].src);
        } 
    });

    $('#previous').click(function(){
		var old = $('.current').removeClass('current');   
        if ( old.is(':first-child')) {
			old.animate({left: "100%"});
			$('.pictures').last().css({left: "-100%"}).addClass('current').animate({left: 0});
            $('.panels > .caption').html($('.pictures').last().find("img")[0].src);
        }else{
			old.animate({left: "100%"});
			old.prev().css({left: "-100%"}).addClass('current').animate({left: 0});
            $('.panels > .caption').html(old.prev().find("img")[0].src);
        }
    });
});