Responsive & Touch Enabled Carousel/Slider – Slider.js

Preview:

Description:

Slider.js is a simple JavaScript Library used to create a responsive, mobile-friendly image carousel/slider with several customization options.

Features:

• Auto resize to fit any screen size.
• Touch for mobile devices enabled.
• Bottom pagination.
• previous/next anchors for forward and backward navigation.

Basic Usage:

Add the slider.js script and other required resources in your document.

<link rel="stylesheet" href="_css/slider.css">
<script src="_js/functions.js"></script>
<script src="_js/slider.js" ></script>

Insert your images into a Html list and wrap the Html list into a DIV container as shown below.

<div id="slider" class="slider-wrapper">
  <ul class="items-holder>
    <li class="item"><img src="_photos/photo_1.jpg" /></li>
    <li class="item"><img src="_photos/photo_2.jpg" /></li>
    <li class="item"><img src="_photos/photo_3.jpg" /></li>
    ...
  </ul>
</div>

The JavaScript to enable the image carousel/slider with pagination, previous/next anchors and touch for mobile devices enabled.

var slider;
window.onload = function(){  
  // Initiate slider
  slider = new Slider( document.getElementById('slider').getElementsByTagName('ul')[0], {
    duration: 600
  } );
  
  // Set the number of items to 1, add pagination, previous and next anchors and start playing
  slider.setItemsNum(1).addPagination().addPrevNextAnchors().enableTouch();
  
  // Handler for more or less anchors
  function anchorClick( e )
  {
    if( !e ) var e = window.event;          // Get event object  
    
    e.returnValue = false;              // Prevent default action
    if( e.preventDefault ) e.preventDefault();      
    
    if(this.className == 'less')
      slider.setItemsNum(slider.getItemsNum() - 1).addPagination().addPrevNextAnchors();
    else
      slider.setItemsNum(slider.getItemsNum() + 1).addPagination().addPrevNextAnchors();    
  }
  
  // Get anchors
  anchors = document.getElementById('more-less').getElementsByTagName( 'a' );
  
  // Assign click event
  for( var i = 0, x = anchors.length; i < x; i++ )
    anchors[i].onclick = anchorClick;  
  
}; // window.onload