previewSlider | Creating a Fullscreen Image Slider with JavaScript

previewSlider is a javascript fullscreen image slider, it allows users can preview next/previous image with full screen when hovering over the navigation arrows.

How to create a fullscreen image slider using previewSlider?

1.Import previewSlider stylesheet and js file in your html page

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

2.Add images to fullscreen slider with code below

<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>

3.Create a previewSlider instance to show images, you can set some options when creating:

• container: container element, a html dom
• 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
});