Hello,
I am working on a slideshow with thumbnails.
My slideshow works but I'd like to have an horizontal slide of my thumbnail since I don't have enough space to display them all.
It could be on hover or on click of a button prev/next. My code needs to be in javascript only no librairies.
My HTML
<div class="controls">
<a class="previous" href="" id="prev" ><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" ><img src="images/fleche_d.jpg" alt="Voir les vignettes de droites" title="Voir les vignettes de droites" /></a>
</div>
My CSS
#slideshow .controls .wrapper-thumbs {
overflow: hidden;
position: relative;
float: left;
margin: 0;
width: 556px;
height: 76px;
}
#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;
}
My JS
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);
}
I can scroll the list of thubnails to the right but then when I mouseup, the list goes back to its original state. I'd like to
- stay where I arrived
- be able to use my left button.
Here is
my live example
Can anyone help me?
Thanks !!