Author: | rogeriopinto |
---|---|
Views Total: | 1,604 views |
Official Page: | Go to website |
Last Update: | October 16, 2014 |
License: | MIT |
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