Scroll div content horizontally using left and right arrow in jquery

Question

I Want to scroll div contents using two buttons

HTML Coding is given below:

Answer 1

It's just a simple example, but you can see the point - how to do it.

HTML:

    

        

            

                
 12:00   
                
 12:30   
                
 13:00   
                
 13:30   
                
 14:00   
                
 14:30   
                
 15:00   
                
 15:30   
                
 16:00   
                
 16:30   
                
 17:00   
                
 17:30   
             
        
        

CSS:

.bstimeslider {

width:500px;
height:40px;
background:#ccc;
position:relative;    
}

.bktibx {

float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;

}

#tslshow {
position:absolute;
left:0;
width:1200px;

}

#leftArrow {

width:40px;
height:40px;
background:#ff0000; 
position:absolute;
left:0px;
}

#rightArrow {

width:40px;
height:40px;
background:#ff0000; 
position:absolute;
right:0px;
}

#viewContainer {
width:360px;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden; 
}

JavaScript:

var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;

$("#rightArrow").click(function(){

    var currentPosition = parseInt(view.css("left"));
    if (currentPosition >= sliderLimit) view.stop(false,true).animate({left:"-="+move},{ duration: 400})

});

$("#leftArrow").click(function(){

    var currentPosition = parseInt(view.css("left"));
    if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});

});

Fiddle: http://jsfiddle.net/yfqyq9a9/2/