A jQuery slideshow plugin with a subtle Ken Burns effect

1. Introduction

subtle-slideshow is a jQuery slideshow plugin with a subtle Ken Burns effect. The plugin using CSS animations and has a nice transition effect easily to customize. Slides can be built with anything you want (images, videos, texts, etc.), however, images are best supported.

Jquery slideshow plugin with a sublte ken burns effect

2. Plugin Overview

Library	subtle-slideshow
Author	Stijn
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version

Demo

3. How to install and use subtle-slideshow jQuery plugin

Follow the below steps to install subtle-slideshow jQuery plugin on your website.

3.1. Load the required jQuery library and all subtle-slideshow assets (js and css files):

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

3.2. Put your slides anywhere within the body element:

<div id="slides">
  <a class="slide" href="#link01">
    <span class="animate right" style="background-image: url(your-image-01.jpg)"></span>
    <div class="static-content"><h1>Revolve Waterbottle</h1></div>
  </a>
  <a class="slide" href="#link02">
    <span class="animate in" style="background-image: url(your-image-02.jpg)"></span>
    <div class="static-content"><h1>Lunchbox</h1></div>
  </a>
  <a class="slide" href="#link03">
    <span class="animate down" style="background-image: url(your-image-03.jpg)"></span>
    <div class="static-content"><h1>Salad Shaker</h1></div>
  </a>
</div>

3.3. Initialize subtle-slideshow by calling .slideshow() function:

 // These are te default settings.
  $('#slides').slideshow({
    randomize: true,            // Randomize the play order of the slides.
    slideDuration: 6000,        // Duration of each induvidual slide.
    fadeDuration: 1000,         // Duration of the fading transition. Should be shorter than slideDuration.
    animate: true,              // Turn css animations on or off.
    pauseOnTabBlur: true,       // Pause the slideshow when the tab is out of focus. This prevents glitches with setTimeout().
    enableLog: false,           // Enable log messages to the console. Useful for debugging.
    slideElementClass: 'slide', // This is also defined in the CSS!
    slideshowId: 'slideshow'    // This is also defined in the CSS!
  });

4. Conclusion

In this article, we presented subtle-slideshow jQuery plugin for generating slideshow on your website. The plugin gives awesome effects and can be easily customized to meet any requirements.