Pure JavaScript horizontal slider

Question

Hello I am working on a slideshow with thumbnails. My slideshow works but I'd like to have a 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.

Here is where I'm at , the entire code is in one page.

-- EDIT

Here is my HTML

<div class="controls">
    <a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></a>
    <div class="thumbs">
        <ul id="thumbs">
        </ul>
    </div>
    <a class="next" href=""><img src="images/fleche_d.jpg" alt=""></a>
</div>

My CSS

.controls {
    width: 658px;
    height: 76px;
    margin-top: 10px;
}

#thumbs {
    display: inline-block;
    overflow: hidden;
    height: 76px;
    position: relative;
    z-index: 99;
}

.controls .previous, .controls .next {
    float: left;
    width: 51px;
    height: 76px;
    position: relative;
    z-index: 999;
}

.controls .previous {
    background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}


.controls .next {
    background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
}

And the 2 simple functions I have tried calling onClick of the a prev/next button.

    // Move thumbs to the left
function left() {
    document.getElementById('thumbs').style.left = '-124px';
}

// Move thumbs to the right
function right() {
    document.getElementById('thumbs').style.right = '-124px';
}

So far nothing works at all. What am I missing?

Answer 1

I think this is what you need to solve your problem. 1 new function getLeft(); the rest is adaptions of existing functions and css.

I think this ought to work for more images, so the client has to push the right-button multiple times to get to the end. You might also want extra calculations to restrict the range; so all the images are not beyond the right or left of the .wrapper-thumbs (feel free to ask me).

Notice: maybe you want left and right to do the opposite (I've seen both) ; just swap the 500 <-> -500

Or do you only want as many images so that only 1 push of the button gets you totally left or right?

css:

#slideshow .controls .wrapper-thumbs {
  overflow: hidden;
  position: relative;   /* this means: the upper-left corner of <div class="wrapper-thumbs"> is now the the new base/zero (for style.left) for all the children with position: absolute */
  float: left;          /* this is so the left- and right-button are kept in place  */
  margin: 0;
  width: 556px;
  height: 76px;
}

#thumbs {
  display: inline-block;
  width: 900px;
  height: 76px;
  position: absolute;  /* So now, the new base of #thumbs is set to the base/zero of <div class="wrapper-thumbs"> */
  z-index: 99;
}

script:

// function reads style.left; removes 'px'; returns the numeric value.
function getLeft() {
  var left = document.getElementById('thumbs').style.left;
  return Number(left.substr(0, left.length - 2));   // .substr removes the 'px'
}
// Move thumbs to the left
function left() {
  var currentLeft = getLeft();
  var newLeft = currentLeft -500;
  document.getElementById('thumbs').style.left = newLeft + 'px';
}

// Move thumbs to the right
function right() {
  var currentLeft = getLeft();
  var newLeft = currentLeft +500;
  document.getElementById('thumbs').style.left = newLeft + 'px';
}