###Description###

A tiny and simple to use content slider (based on JQuery).

Why another? Couldn't find a simple one which doesnt have a ton of lines of code and features I would never want as an user.

You can also use it as image slideshow ;)

###How to use### This is the entire html you need for three slides:

<div id="slide-container">
    
  <div class="slide-wrapper">
    <!-- Slide one -->
    <div class="slide">Content 1</div>

    <!-- Slide two -->
    <div class="slide">Content 2</div>

    <!-- Slide two -->
    <div class="slide">Content 3</div>
  </div>

  <!-- Optional: Next and Prev Buttons -->
  <input type="button" class="prevButton" value="Prev" >
  <input type="button" class="nextButton" value="Next" >

  <!-- Optional: list of li-Elements, which each represent a slide -->
  <ul id="itemList"></ul>
</div>

The only thing you have to set is the width of the slider container. Thus you can decided the width of the viewport.

 #slide-container {
  width:400px;
}

Include the library and init the slider like this :

<script type="text/javascript" src="sliderdiv.js"></script>
<script type="text/javascript">
  // After page load
  var slider = new SliderDiv();
</script>

###Dependencies###

• JQuery

###Options###

If you want to have multiple slideshows or just adapt it to your wishes, you can set some options:

var slider = new SliderDiv({
  
  containerSelector: '#slide-container',
  slideWrapperSelector: '.slide-wrapper',
  slideSelector: '.slide',
  
  // Slide-Items
  itemListSelector : null, // To enable, set the id/class of an ul element (i.e. #itemList)
  itemListElementClass : "slide-item", // ! This is just the class name, not a jquery selector
  activeItemClass : 'active-item', // ! This is just the class name, not a jquery selector

  // Slide buttons selector
  nextButtonSelector: '.nextButton',
  previousButtonSelector: '.prevButton',

  hasKeyEvents: true,

  moveSpeed: 500
});

###Methods###

####Move####

To slide to a certain slide you can call the moveTo() method. It takes the zero-based index of the slide as param.

// Will slide to the third slide-page
slider.moveTo(2)

To slide to the next or previous slide, you can call:

slider.next();
slider.prev();

####Auto-Play####

You can auto play the slideshow by calling the autoPlay() Methode.

// Takes time in miliseconds as param
// Default is 5 seconds
slider.autoPlay(3000);

####AfterMove####

If you want to call code after a slide has moved, you can overwrite the afterMove() Method:

slider.afterMove = function() {
  // do s.t. here
};

####KeyEvents####

If the option hasKeyEvents is set to true, you can navigate by using the left and right arrow keys.

var slider = new SliderDiv({
  hasKeyEvents: true,
});

####Current Slide index#### To get the index of the current slide, you can access currentSlideIndex attribute. The first slide has an index of 0.

slider.currentSlideIndex;