прокрутки содержимого DIV по горизонтали, используя левую и правую стрелку в JQuery

Question

Я хочу прокрутки DIV содержимое с помощью двух кнопок

HTML Coding приводится ниже:

<div class="bstimeslider"> 
    <a href="#"> <img src="images/left.png" ></a> 
     <div class="tslshow"> 
      <div class="bktibx"> 12:00 </div> 
      <div class="bktibx"> 12:30 </div> 
      <div class="bktibx"> 13:00 </div> 
      <div class="bktibx"> 13:30 </div> 
      <div class="bktibx"> 14:00 </div> 
      <div class="bktibx"> 14:30 </div> 
      <div class="bktibx"> 15:00 </div> 
      <div class="bktibx"> 15:30 </div> 
      <div class="bktibx"> 16:00 </div> 
      <div class="bktibx"> 16:30 </div> 
      <div class="bktibx"> 17:00 </div> 
      <div class="bktibx"> 17:30 </div> 
     </div> 
    <a href="#"><img src="images/right.png"></a> 

Сейчас только 15:00 отображается, когда я прокручиваю правую кнопку, которую он должен показывать с 15:30 до 17:30.

Аналогично, когда я нажимаю стрелку влево, она должна прокручиваться влево.

Использование JQuery Я хочу выполнить это. Доступен любой плагин с открытым исходным кодом.

Answer 1

Это простой пример, но вы можете видеть суть - как это сделать.

HTML:

<div class="bstimeslider"> 
    <div id="rightArrow"></div> 
     <div id="viewContainer"> 
      <div id="tslshow"> 
       <div class="bktibx"> 12:00 </div> 
       <div class="bktibx"> 12:30 </div> 
       <div class="bktibx"> 13:00 </div> 
       <div class="bktibx"> 13:30 </div> 
       <div class="bktibx"> 14:00 </div> 
       <div class="bktibx"> 14:30 </div> 
       <div class="bktibx"> 15:00 </div> 
       <div class="bktibx"> 15:30 </div> 
       <div class="bktibx"> 16:00 </div> 
       <div class="bktibx"> 16:30 </div> 
       <div class="bktibx"> 17:00 </div> 
       <div class="bktibx"> 17:30 </div> 
      </div> 
     </div> 
     <div id="leftArrow"></div> 
</div> 

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/