Sliding div horizontalement avec des fleches
Je suis partie sur une autre solution utilisant scrollLeft et un timeout qui me permet d'avoir un scoll plus fluide.
Code:
1 2 3 4 5 6 7 8 9 10
| <div class="controls">
<a class="previous" href="" id="prev" onmousedown="left();" onmouseup="stopChrono();"><img src="images/fleche_g.jpg" alt="Voir les vignettes de gauche" title="Voir les vignettes de gauche" /></a>
<div class="wrapper-thumbs">
<div id="allthumbs">
<ul id="thumbs">
</ul>
</div>
</div>
<a class="next" href="" id="next" onmousedown="right();" onmouseup="stopChrono();"><img src="images/fleche_d.jpg" alt="Voir les vignettes de droites" title="Voir les vignettes de droites" /></a>
</div> |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| #slideshow .controls .wrapper-thumbs {
overflow: hidden;
position: relative;
float: left;
margin: 0;
width: 556px;
height: 76px;
}
/* #allthumbs {
width: 556px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
} */
#thumbs {
display: inline-block;
width: 900px;
height: 76px;
position: absolute;
z-index: 99;
}
#thumbs li {
display: inline-block;
max-width: 114px;
margin-left: 10px;
}
#thumbs img {
float: left;
width: 114px;
margin: 0;
}
#thumbs img:hover {
cursor: pointer;
}
#slideshow .controls .previous, #slideshow .controls .next {
float: left;
width: 51px;
height: 76px;
position: relative;
z-index: 999;
}
#slideshow .controls .previous {
background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}
#slideshow .controls .next {
background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
} |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| // Use the arrow to slide the thumbnails
var chrono;
function stopChrono() {
clearInterval(chrono);
}
function left() {
document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) - 10);
chrono = setTimeout("left()",100);
}
function right() {
document.getElementById("allthumbs").scrollLeft = (parseInt(document.getElementById("allthumbs").scrollLeft,10) + 10);
chrono = setTimeout("right()",100);
} |
Un exemple "live"
Mon problème est que quand je cliques et que je reste clique ça marche bien c;est parfait mais quand je lâche ma souris, les vignettes reviennent a leur position de départ. Idéalement j'aimerais que
- le div reste ou il était quand j'ai lâche la souris et
- pouvoir utiliser la flèche de gauche...
Merci de votre aide pour m;aider a résoudre mon soucis, en JS seulement, pas de librairies !