JSFiddle - React, Tailwind, and code Playground

by deez

HTML

<div id="slidees">
       <div id="wrap_slide">
           <a href="#" class="link">
            <img src="http://lorempixel.com/output/nature-q-c-700-356-3.jpg" alt="" title="">
           </a>
           <a href="#" class="link">
            <img src="http://lorempixel.com/output/nature-q-c-700-356-1.jpg" alt="" title="">
           </a>
           <a href="#" class="link">
            <img src="http://lorempixel.com/output/abstract-q-c-700-356-1.jpg" alt="" title="">
           </a>
       </div>

       <a href="#" class="next">Next</a>

       <div class="cb"></div>

    </div>

CSS

body{
	margin:0;
	padding:0;
}
#slidees{
	width: 700px;
	height: 397px;
	padding: 0;
	margin: 0 auto;
}
.slidees_title{
	font-family: "Helvetica",'Arial',"serif";
}
.slidees_text{
	font-family: "Arial",'Helvetica',"serif";
}
.next,.prev{
	font-family: "Helvetica",'Arial',"serif";
	display: inline-block;
	margin-top: 3px;
	padding: 0px 20px;
	border: 1px solid #036894;
	text-decoration: none;
	color: #FFF;
	background: #0781B5;
	border-radius: 6px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow: 0px 4px 0px 0px #036894;
	-webkit-box-shadow: 0px 4px 0px 0px #036894;
	-moz-box-shadow: 0px 4px 0px 0px #036894;
	-o-box-shadow: 0px 4px 0px 0px #036894;
	position: relative;
}
.next:active,.prev:active{
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-o-box-shadow:none;
	margin-top: 6px;
}
.next{
	float: right;
}

.cb{
	clear:both;
}

JavaScript

jQuery(function($){
	//STYLE
	var wrap = {
		width : "9999px",
		position: "relative",
		padding:0,
	};
	var slidees_style = {
		overflow : "hidden"
	};
	var wrap_slide_link = {
		position:"relative",
		float: "left",
		margin:0,
		padding:0,
		display:"block"
	};
	var wrap_slide_title = {
		position: "absolute",
		bottom: "57px",
		left: "0px",
		right: "0px",
		color: "#FFF",
		margin: "0px",
		padding: "10px 10px 10px 39px",
		fontSize: "26px",
		background: "rgba(0,0,0,0.5)",
		height:"20px"
	};

	var wrap_slide_texte = {
		margin: 0,
		padding: "10px 10px 10px 39px",
		position:"absolute",
		color: "#FFF",
		bottom:"5px",
		background: "rgba(0,0,0,0.5)",
		left: 0,
		right: 0,
		height: "32px"
	};
	//FIN STYLE
    
	var $slidees = $('#slidees');
	var $wrap_slidees = $('#wrap_slide');
    
	//Ajout des styles au éléments
	$wrap_slidees.css(wrap);
	$slidees.css(slidees_style);
	$wrap_slidees.children().css(wrap_slide_link);
	$wrap_slidees.children().children('.slidees_title').css(wrap_slide_title);
	$wrap_slidees.children().children('.slidees_texte').css(wrap_slide_texte);
    
	var slidees_width = $slidees.outerWidth();
	var left_value = slidees_width * (-1);
    //On ajoute le derniere element a la premiere position au cas ou on veut aller a la précédent image
	$wrap_slidees.children(':first').before($wrap_slidees.children(':last'));
    //on positionne le slide a la seconde image
	$wrap_slidees.css('left',left_value);

	//CLICK BUTTON NEXT
	$slidees.find('.next').click(function(){
        var left_indent = parseInt($wrap_slidees.css('left')) - slidees_width;
        $wrap_slidees.animate({
            'left' : left_indent
            },900, function(){
            //On place le premier élément à la dernier position
            $wrap_slidees.children(':last').after($wrap_slidees.children(':first'));
            //On replace le slide à sa position
            $wrap_slidees.css({'left' : left_value});
        });
        return false;
	});




});