The aim behind the Ideal Image Slider was to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as "extensions".
HTML5 & SEO friendly
Modern HTML5 structure that is search engine friendly.
CSS3 powered transitions
Hardware-accelerated transition effects powered by CSS3.
Standard left/right navigation with touch support for mobile devices.
Images fit the slider on devices of any shape and size.
HiDPI (retina) support
Optional @2x support for HiDPI devices, including retina devices.
Increased accessibility using the W3C ARIA specification.
<html> <head> <!-- Include slider and theme CSS files --> <link rel="stylesheet" href="ideal-image-slider.css"> <link rel="stylesheet" href="themes/default/default.css"> </head> <body> <!-- Create your slider and add images --> <div id="slider"> <img src="img/1.jpg" alt=""> <img data-src="img/2.jpg" src="" alt=""> <img data-src="img/3.jpg" src="" alt=""> </div> <!-- Include slider JS file --> <script src="ideal-image-slider.js"></script> <!-- Create your slider --> <script> new IdealImageSlider.Slider('#slider'); </script> </body> </html>