JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<figure class="slideshow">
    <img src="http://www.decodir.com/wp-content/uploads//2009/11/Luxury-Lounge-Interior-with-Beautiful-Lighting-Installation-550x366.jpg" />
    <img src="http://www.homeinteriordesigned.com/wp-content/uploads/2011/04/Modern-Lounge-Interior-05.jpg" />
    <img src="http://farm3.static.flickr.com/2460/4010339074_6d5281d7e4_o.jpg" />
    <img src="http://www.jebole.com/wp-content/uploads/2010/06/modern-lounge-interior-decorating-604x391.jpg" />
    <img src="http://thefree3dmodels.com/_sf/1/25947929.jpg" />
    <img src="http://www.bejoku.com/wp-content/uploads/2011/09/simple-lounge-of-modern-office-interior-500x369.jpg" />

     <!--    
             .
             .
             .
       more pictures
             .
             .
             .
                       -->
    <a class=prev>prev</a>
    <a class=next>next</a>
</figure>

CSS

body{
 background:#f1f1f1;   
}

.slideshow { 
    position:relative; 
    width:300px;
    height:200px;
  
    margin:60px auto;
    border: 5px solid white;
    box-shadow: 0px 0px 5px #AAA;
}
.slideshow img { 
    position:absolute; 
    left:0; 
    top:0;
    width:100%;
    height:auto;
}

.prev, .next{
 position:absolute;
top:44%;    
    cursor:pointer;
    padding:10px 20px;
    background:silver;
    border:2px solid #f1f1f1;
    border-radius:20px;
}
.prev{
 left:-80px;   
}
.next{
 right:-80px;   
}

JavaScript

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        
        
        $('.slideshow img:first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
});

});    

if (!next.length) {
            next = $(".ad img:first");
        }else{
          
        }
        

$('.next').click(function(){ 
     $('.slideshow img:first').fadeOut(2000).next().fadeIn(2000).end().appendTo('.slideshow');
})