Slide Horizontal

by Luong Dung

HTML

<div class="slides">
  <ul>
    <li>sfd </li>
    <li>hdfhd</li>
    <li>mvbvmb</li>
    <li>34yery</li>
    <li>376ry</li>
    <li>utmryrny</li>

  </ul>
</div>
<div class="btn prev">prev</div>
<div class="btn next">next</div>

CSS

.slides{
  width: 600px;
  overflow: hidden;
  border: 1px solid #000;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  width: 200px;
  display: inline-block;
  margin-right:-4px;
  background: #00c8d2;
  list-style: none;
  height: 100px;
}
.btn{
  padding: 5px;
  background: #54dd0e;
  margin: 3px;
}

JavaScript

$(function(){
var $slides = $('ul');
var $countSlide = $('ul li').length;
var $widthSlide = $('ul li').width();
var $heightSlide = $('ul li').height();
var $widthTotal = $countSlide*$widthSlide;
var $currentSlide = 0;
var $prev =$('.prev');
var $next =$('.next');
$slides.css({width: $widthTotal+"px"});
$next.on("click", function(){
		$currentSlide++;
    $slides.animate({"margin-left":"-="+$widthSlide},1000)
    if($currentSlide == $countSlide-3){
    	$next.css({"visibility":"hidden"});
    }
    if($prev.css("visibility")=="hidden"){
    	$prev.css({"visibility":"visible"});
    }
})
 if($currentSlide == 0){
    	$prev.css({"visibility":"hidden"});
    }
$prev.on("click", function(){
		$currentSlide--;
    $slides.animate({"margin-left":"+="+$widthSlide}, 1000);
    if($currentSlide == 0){
    	$prev.css({"visibility":"hidden"});
    }
    if($next.css("visibility")=="hidden"){
    	$next.css({"visibility":"visible"});
    }
})
})