Small Background Accordion Slider With jQuery - fsbanner

fsbanner is a very small jQuery plugin used for creating an accordion-style background image slider that supports both click and hover events.

How to use it:

1. Include the required stylesheet fsbanner.css in the head section of the html document.

<link href="fsbanner.css" rel="stylesheet">

2. Add images with description text into the accordion slider.

<div class="fsbanner" id="demo">
  <div style="background-image:url(1.jpg)">
    <span class="name">Image 1</span>
  </div>
  <div style="background-image:url(2.jpg)">
    <span class="name">Image 2</span>
  </div>
  <div style="background-image:url(3.jpg)">
    <span class="name">Image 3</span>
  </div>
  ...
</div>

3. Include jQuery library and the jQuery fsbanner plugin's script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="fsbanner.js"></script> 

4. Initialize the plugin on document ready and done.

$('#demo').fsBanner();

5. Plugin's default options.

$('#demo').fsBanner({

  // show image descriptions
  'showName':true,  

  // update other slides
  'toUpdate':{},

  // set default values for slides
  'whenEmpty':{},

  // or 'mouse'
  'trigger':'click', 

  // If set, the whenEmpty option will be ignored. 
  // When there is no banner and hideParent is set, the script will hide the element based on the selector passed.
  'hideParent':null,

  // callback
  'onChanged':null
  
});

---

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