Skip to content

Responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.

License

Notifications You must be signed in to change notification settings

alikinvv/previewSlider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

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

About

Responsive fullscreen image slider where the users are able to preview next/previous image when hovering over the navigation arrows.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published