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.
2. Plugin Overview
Library | subtle-slideshow |
Author | Stijn |
Licence | MIT Licence |
Repository | GitHub |
Dependencies | jQuery 1.3.1 or Latest version |
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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}