Easy jQuery Responsive Slideshow Plugin - Billboard

Billboard is a simple and easy-to-use jQuery plugin for creating a responsive slideshow/slider on the website to present your featured content.

Features:

• Automatically detect slideshow size.
• Automatically detect each slide's size.
• Stretch images to fill container.
• Customizable sliding orientation (vertical or horizontal).
• Autoplay and endless sliding.
• Transition and easing effects supported.
• Pager and controls navigation.
• Auto captions using title attribute.
• Swipe and mouse move supported.

Basic Usage:

1. Include required jQuery Billboard plugin's stylesheet on the page.

<link rel="stylesheet" href="jquery.billboard.css">

2. Create the html for a slideshow.

<div id="demo">
 <ul>
  <li title="Caption 1"><a href="#"><img src="images/photo1.jpg"></a></li>
  <li title="Caption 2"><a href="#"><img src="images/photo2.jpg"></a></li>
  <li title="Caption 3"><a href="#"><img src="images/photo3.jpg"></a></li>
  <li title="Caption 4"><a href="#"><img src="images/photo4.jpg"></a></li>
 </ul>
</div>

3. Include jQuery library and jQuery Billboard plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jquery.billboard.js"></script> 

4. Include jQuery easing plugin for easing options.

<script src="js/vendor/jquery.easing.js" type="application/javascript"></script> 

5. Include jQuery.event.swipe for swipe support on touch devices.

<script src="js/vendor/jquery.event.swipe.js" type="application/javascript"></script> 

6. Initialize the plugin.

jQuery(document).ready(function($) {	
$("#demo").billboard();
});

7. Configurations.

jQuery(document).ready(function($) {
$("#demo").billboard({
ease: "easeInOutExpo", // animation ease of transitions
speed: 1000, // duration of transitions in milliseconds
duration: 5000, // time between slide changes
autoplay: true, // whether slideshow should play automatically
loop: true, // whether slideshow should loop (only applies if autoplay is true)
transition: "left", // "fade", "up", "down", "left", "right"
navType: "list", // "controls", "list", "both" or "none"
styleNav: true, // applies default styles to nav
includeFooter: true, // show/hide footer (contains caption and nav)
autosize: true, // attempts to detect slideshow size automatically
resize: false, // attempts to detect each slide's size automatically
stretch: true// stretch images to fill container
});
});

Change log:

2014-01-18

• working on resizing text slides

2013-12-11

• Fixed sizing issue on non-autosized billboards

---

This awesome jQuery plugin is developed by spalmer. For more Advanced Usages, please check the demo page or visit the official website.