Product Slider

Code example

<div class="product-slider" id="product-slider-1">
  <div>
    <img src="images/Elvis Presley - Elvis Presley.jpg"></img>
  </div>
  <div>
    <img src="images/Jimi Hendrix - Experience Hendrix.jpg"></img>
  </div>
  <div>
    <img src="images/The Beatles - Sgt. Pepper's Lonely Hearts Club Band.jpg"></img>
  </div>
  <div>
    <img src="images/The Doors - The Doors.jpg"></img>
  </div>
</div>
<!-- ... -->
<script>$('#product-slider-1').productSlider()</script>

Add a link to your slides

Jimi Hendrix - Experience Hendrix

<div class="product-slider" id="product-slider-2">
  <div>
    <a class="content" href="/">
      <img src="images/Elvis Presley - Elvis Presley.jpg"></img>
    </a>
  </div>
  <div>
    <a class="content" href="/">
      <img src="images/image-with-wrong-name.jpg"></img>
    </a>
    <span>
      <a href="/">Jimi Hendrix - Experience Hendrix</a>
    </span>
  </div>
  <div>
    <a class="content" href="/">
      <img src="images/The Beatles - Sgt. Pepper's Lonely Hearts Club Band.jpg"></img>
    </a>
  </div>
</div>
<!-- ... -->
<script>
  $('#product-slider-2').productSlider({
    slideWidth: 150,
    previewHeight: 200,
    navbarHeight: 100,
  })
</script>

If the product should get another title than the name of the image, you can define a <span> element. It's complete inner HTML code will be reused. In this case you have to define a link to the same location, both on the image and the description. Otherwise the autogenerated description consists of the same link as the slide.