Ideal Image Slider is to create a slider with just the right amount of features, no bloat, and is easy to expand so more features can be added as ‘extensions’.
Here are the main ideas and features I wanted to include:
- HTML5 (Optimized for SEO)
- CSS3 transitions (some simple transitions like sliding/fade)
- Left/Right Navigation (including touch/swipe support)
- Responsive
- HiDPI (retina) support
- ARIA support
- Very easy to setup (no dependencies)
- Very stretchy
- Uses gradual reinforcement
- Open-source (it goes without saying)
As an example, here are some features that shouldn’t be in essence and can be optional extensions:
- Themes or skins
- More transitions
- Bullet navigation
- Thumbnail navigation
- Full screen slider
- Video/Audio support
- etc…
Angular Responsive Image Slider With Lightbox Popup Library
How to make use of it:
1. Import basic JavaScript and CSS files into your web page.
<link rel="stylesheet" href="ideal-image-slider.css"> <script src="ideal-image-slider.js"></script>
2. Include a CSS theme of your choice:
<link rel="stylesheet" href="default.css">
3. Include included script when needed:
<script src="extensions/captions/iis-captions.js"></script> <script src="extensions/bullet-nav/iis-bullet-nav.js"></script>
4. Wrap your images with retina versions in a DIV container called “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>
5. Create a new instance of the Ideal Image Slider.
var slider = new IdealImageSlider.Slider('#slider');
6. Activate the image slider.
slider.start();
7. Configure 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' } });
8. Callback functions.
var slider = new IdealImageSlider.Slider({ onInit: function() {}, onStart: function() {}, onStop: function() {}, onDestroy: function() {}, beforeChange: function() {}, afterChange: function() {} });
9. 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);
Settings
Setting | Default Value | Description |
---|---|---|
selector | '' | CSS selector for the slider |
height | 'auto' | Height of the slider. Can be 'auto'  (height changes depending on the height of the slide), a fixed px value (e.g. 400 ) or an aspect ratio (e.g. '16:9' ) |
initialHeight | 400 | If height is 'auto'  or an aspect ratio this is the height of the slider while the first image is loading |
maxHeight | null | If height is 'auto'  or an aspect ratio this is an optional max height in px for the slider (e.g. 800 ) |
interval | 4000 | Time (in ms) to wait before changing to the next slide |
transitionDuration | 700 | Duration (in ms) of animated transition |
effect | 'slide' | Transition effect (slide/fade by default) |
disableNav | false | Toggle the previous/next navigation (also disables touch and keyboard navigation) |
keyboardNav | true | Toggle keyboard navigation |
previousNavSelector | '' | Selector for custom previous nav element |
nextNavSelector | '' | Selector for custom next nav element |
classes | {...} | List of classes to be used by slider. Probably shouldn’t be changed |
Event | Description |
---|---|
onInit | Callback that fires when slider and first image have loaded |
onStart | Callback that fires when slider has started playing |
onStop | Callback that fires when slider has stopped playing |
onDestroy | Callback that fires when slider is destroyed |
beforeChange | Callback that fires before a slide has changed |
afterChange | Callback that fires after a slide has changed |
Method | Description |
---|---|
start() | Start the slider. Note the slider will automatically be stopped when navigation is used |
stop() | Stop the slider |
previousSlide() | Change to the previous slide |
nextSlide() | Change to the next slide |
gotoSlide(index) | Change to a specific slide (1 indexed) |
destroy() | Destroy the slider |
get(attribute) | Get an attribute value (attributes are mostly used internally) |
set(attribute, value) | Set an attribute. Can be useful for storing custom data |
Easy Responsive Carousel, Ideal Image Slider Plugin/Github
See Demo And Download
Official Website(Codeinwp): Click Here
This superior jQuery/javascript plugin is developed by Codeinwp. For extra Advanced Usages, please go to the official website.
Be First to Comment