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
   
Basic Background Image Slideshow Plugin with jQuery - pslider

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.