previewSlider is a responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.

Clicking on the navigation arrows will transition to the next/prev image after a certain delay, with a countdown progress bar that tells the users how long it will take to start the transition.

⭐ Star us on GitHub — it helps!

• container (object) - slider initialization container
• arrowLeft (object) - left arrow
• arrowRight (object) - right arrow
• content (boolean) - true to use div as slides, false to use img as slides | Default: false
• scale (number) - zoom size in preview gallery | Default: 0.4
• scrollSpeed (number) - scroll speed in preview gallery | Default: 4

Example of the html markup for image slider:

<div class="preview-slider">
    <div class="slider-wrapper">
        <img class="slider-item" src="img/img1.jpg" alt=""></div>
        <img class="slider-item" src="img/img2.jpg" alt=""></div>
        <img class="slider-item" src="img/img3.jpg" alt=""></div>
    </div>

    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-left"></div>
</div>

Initialization for images slider:

new previewSlider({
    container: '.preview-slider',
    arrowLeft: '.preview-slider .arrow-left',
    arrowRight: '.preview-slider .arrow-right',
});

Example of the html markup for conent slider:

<div class="preview-slider">
    <div class="slider-wrapper">
        <div class="slider-item" style="background-image: url(img/img1.jpg)"></div>
        <div class="slider-item" style="background-image: url(img/img2.jpg)"></div>
        <div class="slider-item" style="background-image: url(img/img3.jpg)"></div>
    </div>

    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-left"></div>
</div>

Initialization for conent slider:

new previewSlider({
    container: '.preview-slider',
    content: true,
    arrowLeft: '.preview-slider arrow-left',
    arrowRight: '.preview-slider .arrow-right',
});

This project is licensed under the MIT License - see the LICENSE file for details