Skip to content
Responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
.gitattributes
LICENSE
README.md

README.md

previewSlider

GitHub Issues HitCount License Donations Badge

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!

Live Demo

aligment buttons

Options

  • 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

Usage

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',
});

License

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

Analytics

You can’t perform that action at this time.