JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>
 
    <div id="slides"> 
        <ul>
            <li><img src="http://lorempixum.com/240/240/sports/1/1%20first" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="http://lorempixum.com/240/240/sports/2/2%20second" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="http://lorempixum.com/240/240/sports/3/3%20third" width="240" height="240" alt="Slide 3"/></li>
            <li><img src="http://lorempixum.com/240/240/sports/4/4%20fourth" width="240" height="240" alt="Slide 3"/></li>
            <li><img src="http://lorempixum.com/240/240/sports/5/5%20fifth" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>
 
</div>

CSS

#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}
 
#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}
 
/* remove the list styles, width : item width * total items */ 
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;  
    // width is dynamically calculated, itemWidth * number of items           
}
 
/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}
 
#slides li img {
    padding:5px;
}
 
/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0;  
    float:right;
}
 
#buttons a {
    display:block; 
    width:31px; 
    height:32px;
    float:left;
    outline:0;
}
#buttons a {opacity: 0.5;} 
a#prev {
    background:red; 
}
 
a#prev:hover {
    opacity: 1;
}
 
a#next {
    background:green;
}
 
a#next:hover {
    opacity: 1;
}
 
.clear {clear:both}

JavaScript

var $band = $('#slides ul'),
    $items = $band.find('li'),
    itemWidth = $items.outerWidth(),
    current = 1,
    total = $items.length;
$band.css('width', itemWidth * total);

function moveSlide(ev) {
    ev.preventDefault();
    var newItemLeft,
        duration = 400,
        easing = 'swing';    

    function loop(){
        duration *= total / 2;
        easing = "easeInBack";
    }

    if(this.id === 'prev') {
        if(current === 1) { // go back to last
            current = total;
            loop();
        } else {
            current--;
        }
    } else { // next
        if(current === total) { // go back to first
            current = 1;
            loop();
        } else {
            current++;            
        }
    }
    newItemLeft = itemWidth - (current * itemWidth);
    
    $band.animate({
        'left': newItemLeft
    }, duration, easing);
}

$('#prev,#next').click(moveSlide);