Fullscreen Image Slider With Thumbnail Preview – previewSlider

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.

How to use it:

Load the previewSlider’s JavaScript and Stylesheet in the page.

<link rel="stylesheet" href="css/preview-slider.min.css">
<script src="js/preview-slider.min.js"></script>

Add images (or background images) together with the navigation controls and slider descriptions to the page.

<div class="preview-slider">
  <div class="slider-wrapper">
    <div class="slider-item" style="background-image: url(img/img4.jpg)"></div>
    <div class="slider-item" style="background-image: url(img/img1.jpg)"></div>
    <div class="slider-item" style="background-image: url(img/img6.jpg)"></div>
    <div class="slider-item" style="background-image: url(img/img3.jpg)"></div>
    <div class="slider-item" style="background-image: url(img/img5.jpg)"></div>
    <div class="slider-item" style="background-image: url(img/img2.jpg)"></div>
  </div>
  <div class="arrow arrow-right"></div>
  <div class="arrow arrow-left"></div>
  <div class="slider-desc">
    <p class="title">CSSSCRIPT.COM</p>
    <span class="desc">JavaScript/HTML5/CSS3</span>
  </div>
</div>

Initialize the preview slider with the following parameters:

• container: container element
• content: uses DIV or Image as slides
• arrowLeft: left arrow
• arrowRight: right arrow
• scale: scale size
• scrollSpeed: animation speed

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