Responsive & Touch Enabled Carousel/Slider – Slider.js

Category: Javascript , Slideshow | October 16, 2014
Views Total:1,604 views
Official Page:Go to website
Last Update:October 16, 2014


Responsive & Touch Enabled Carousel/Slider – Slider.js


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


  • 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>

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
  // 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();
      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 

You Might Be Interested In:

Leave a Reply