Author: | Codeinwp |
---|---|
Views Total: | 2,648 views |
Official Page: | Go to website |
Last Update: | November 23, 2016 |
License: | GPL 3.0 |
Preview:

Description:
Ideal Image Slider is a standalone and easy-to-use JS library that lets you create responsive, accessible, extensible, touchable, retina-ready images sliders with smooth CSS3 powered slide or fade transitions.
How to use it:
Import the core JavaScript and CSS files into your webpage.
<link rel="stylesheet" href="ideal-image-slider.css"> <script src="ideal-image-slider.js"></script>
Include a theme CSS of your choice:
<link rel="stylesheet" href="default.css">
Include built-in extensions when needed:
<script src="extensions/captions/iis-captions.js"></script> <script src="extensions/bullet-nav/iis-bullet-nav.js"></script>
Wrap your images with retina versions into a DIV container named ‘slider’:
<div id="slider"> <img src="img/1.jpg" data-src-2x="img/[email protected]" alt="Slide 1" /> <img data-src="img/2.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 2" /> <a href="http://example.com"><img data-src="img/3.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 3" /></a> <img data-src="img/4.jpg" data-src-2x="img/[email protected]" src="" alt="Slide 4" /> </div>
Create a new instance of the Ideal Image Slider.
var slider = new IdealImageSlider.Slider('#slider');
Active the image slider.
slider.start();
Config the image slider by passing the following options as the first parameter to the Slider method.
var slider = new IdealImageSlider.Slider({ selector: '', height: 'auto', // "auto" | px value (e.g. 400) | aspect ratio (e.g. "16:9") initialHeight: 400, // for "auto" and aspect ratio maxHeight: null, // for "auto" and aspect ratio interval: 4000, transitionDuration: 700, effect: 'slide', disableNav: false, keyboardNav: true, previousNavSelector: '', nextNavSelector: '', classes: { container: 'ideal-image-slider', slide: 'iis-slide', previousSlide: 'iis-previous-slide', currentSlide: 'iis-current-slide', nextSlide: 'iis-next-slide', previousNav: 'iis-previous-nav', nextNav: 'iis-next-nav', animating: 'iis-is-animating', touchEnabled: 'iis-touch-enabled', touching: 'iis-is-touching', directionPrevious: 'iis-direction-previous', directionNext: 'iis-direction-next' } });
Callback functions.
var slider = new IdealImageSlider.Slider({ onInit: function() {}, onStart: function() {}, onStop: function() {}, onDestroy: function() {}, beforeChange: function() {}, afterChange: function() {} });
API methods.
// active the slider slider.start(); // stop the slider slider.stop(); // back to the prev slide slider.previousSlide(); // goto the next slide slider.nextSlide(); // goto slide 2 slider.gotoSlide(2); // destroy the slider slider.destroy(); // get an attribute value slider.get(attribute); // set an attribute slider.set(attribute, value);