Fullscreen Image Slider With Thumbnail Preview – previewSlider

Category: Javascript , Slider | February 26, 2019
Author: alikinvv
Views Total: 120
Official Page: Go to website
Last Update: February 26, 2019
License: MIT

Preview:

Fullscreen Image Slider With Thumbnail Preview – previewSlider

Description:

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

You Might Be Interested In:


Leave a Reply