JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div id="portfolio-details">
    <span class="prev">prev</span>
    <span class="next">next</span>
    
    <div id="portfolio-slider">
        <img src="http://m.cdn.blog.hu/zo/zoldsziget/image/lusta_dog.jpg" />
        <img src="http://3.bp.blogspot.com/-hIdKe5l_t5M/Tcah17tzK6I/AAAAAAAAAdA/Eh6QhUSB1e4/s400/Dog-Puppys.jpg" />     
        <img src="http://www.brabantmotors.nl/Accessoires_files/Sprint-underseat-4.jpeg" />
    </div>
</div>

CSS

.portfolio-item img {
    width: 150px; 
    float: left;
}

#portfolio-details {
    overflow: hidden; overflow-x: hidden;
    position: absolute; top: 100px; width: 99%;
}

#portfolio-details img {float: left;}

#portfolio-details span {cursor: pointer;}

#portfolio-slider {clear: both; width: 3000px; height: 300px; position: relative;}

JavaScript

var min = 0,
    max = 800;
$('.next').click(function(){
    $('#portfolio-slider').animate({
			left: "-=400",
		}, {
            step: function (now, fx) {
                                    console.log(now);
                if(parseInt(now) <= (max*-1)){
                    $(this).stop();
                    fx.end = fx.start;
                }
            }
        }, 300);       
});

$('.prev').click(function(){
    $('#portfolio-slider').animate({
			left: "+=400",
		}, {
            step: function (now, fx) {
                if(parseInt(now) >= min){
                    $(this).stop();
                    fx.end = fx.start;
                }
            }
        }, 300);       
});