Basic Background Image Slideshow Plugin with jQuery - pslider
File Size: | 6.2 KB |
---|---|
Views Total: | 2314 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
pslider is a concise jQuery plugin that takes a group of links with background images and converts them into an automatic banner slideshow with a crossfade transition effect.
How to use it:
1. Make sure you have jQuery library installed and then load the stylesheet jquery.pslider.css
in the header and the script jquery.pslider.js
at the bottom of the web page.
<link rel="stylesheet" href="jquery.pslider.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.pslider.js"></script>
2. Wrap a group of links with background images into a container element.
<div class="slider"> <a href="#" class="slider-item cnow" style="background-image: url('01.jpg');"></a> <a href="#" class="slider-item" style="background-image: url('02.jpg');"></a> <a href="#" class="slider-item" style="background-image: url('03.jpg');"></a> </div>
3. Call the plugin on the container element and we're done.
$(".slider").pslider({ // autoplay interval duration:6000 });
This awesome jQuery plugin is developed by javapolo. For more Advanced Usages, please check the demo page or visit the official website.