Ideal Image Slider

Quite simply the ideal Image Slider in vanilla JS

Slide 1 Slide 2 Slide 3 Slide 4

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.

Touch-enabled navigation

Standard left/right navigation with touch support for mobile devices.

Fully responsive

Images fit the slider on devices of any shape and size.

HiDPI (retina) support

Optional @2x support for HiDPI devices, including retina devices.

ARIA support

Increased accessibility using the W3C ARIA specification.

Quick Start

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