Fullscreen Background Image Slideshow CSS – jQuery Subtle

A lightweight jQuery and CSS based plugin to Make fullscreen background image slideshow with subtle Ken Burn (pan and zooming) effects. Additionally, it also support videos to slide besides the images.

Plugin Overview

Plugin: subtle-slideshow.js
Author: Stijn
Licence: MIT Licence
Published: March 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 12.2 KB

How to Make Fullscreen Background Image Slideshow:

1. Load the jQuery and slideshow’s JavaScript and CSS files into HTML document.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Slideshow Js -->
<script src="jquery.subtle-slideshow.js"></script>

<!-- Slideshow CSS -->
<link rel="stylesheet" href="subtle-slideshow.css">

2. Create HTML structure for slideshow like below.

<div id="slides">
   <a class="slide" title="Your title here" href="#">
        <span class="animate down" style="background-image: url(image-url-here)"></span>
        <div class="static-content"><h1>Caption for the Image here</h1></div>
   </a>
  <a class="slide" title="Your title here" href="#">
        <span class="animate down" style="background-image: url(image-url-here)"></span>
        <div class="static-content"><h1>Caption for the Image here</h1></div>
  </a>
</div>

3. Initialize the plugin in jQuery document ready function.

$(document).ready(function(){
   $('#slides').slideshow();
});

4. If you want to change the duration of images slide, use the following options.

$('#slides').slideshow({
 slideDuration: 6000,  // Duration of each individual slide.
 fadeDuration: 1000,    // Duration of the fading transition.
});

5. To enable / disable random play order of the slides. Default: true, type: bool

$('#slides').slideshow({
 randomize: false, 
});

6. To turn of the CSS animations. Default: true, type: bool

$('#slides').slideshow({
 animate: false, 
});

7. Pause the slideshow when the tab is out of focus.

$('#slides').slideshow({
 pauseOnTabBlur: true,
});

8. Enable log messages to the console. Useful for debugging purpose. Default: false, type: bool

$('#slides').slideshow({
 enableLog: true,
});