Slider

by Santosh Thakur

HTML

<div id="wrapper">
  <div id="mySlider">
    <div id="daysAgo2">Actions from 2 Days Ago</div>
    <div id="yesterday">Yesterday's Actions</div>
    <div id="today">Today's Actions</div>
  </div>
</div>
<br>
<a class="date-nav-prev">  Prev</a>
<a class="date-nav-next">Next </a>

CSS

#wrapper {
  width: 300px;
  height: 100px;
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
}

#mySlider {
  width: 1000px !important;
  height: 100% !important;
  position: absolute;
}

#mySlider div {
  width: 300px;
  height: 100%;
  float: left;
}

#today {
  background: green;
}

#yesterday {
  background: yellow;
}

#daysAgo2 {
  background: orange;
}

JavaScript

var sliderWidth = $('#mySlider > div').width();
 var slider = $('#mySlider');
 var sliderCount = $('div', slider).length;
 slider.width(sliderCount * sliderWidth);

 $('a.date-nav-prev').click(function() {
   console.log(sliderCount != sliderWidth);
   if(sliderCount != sliderWidth){
   $('#mySlider').animate({
     left: '+=' + 300
   }, 500);
   }else{
   console.log("end");
   }
   
 });

 $('a.date-nav-next').click(function() {
   $('#mySlider').animate({
     left: '-=' + 300
   }, 500);
 });