Faites défiler le contenu div horizontalement en utilisant les flèches gauche et droite dans jquery - jquery, html

Je veux faire défiler le contenu div à l'aide de deux boutons

Le codage HTML est donné ci-dessous:

<div class="bstimeslider">
<a href="#"> <img src="/images/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/images/right.png"></a>

Maintenant, seulement 15h00 s'affiche lorsque je défile le bouton droit, il devrait s'afficher de 15h30 à 17h30.

De même, lorsque je clique sur la flèche gauche, il devrait défiler vers la gauche.

En utilisant Jquery, je veux effectuer cela. Tout plugin opensource est disponible.

Réponses:

5 pour la réponse № 1

C'est juste un exemple simple, mais vous pouvez voir le point - comment le faire.

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});

});

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

---

0 pour la réponse № 2

Vous pouvez modifier le style de la barre de défilement en utilisant l'ancien CSS classique:

::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #b30000;
}

---