Small Background Accordion Slider With jQuery - fsbanner

File Size: 5.37 KB
Views Total: 8023
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 style="background-image:url(2.jpg)">
    <span class="name">Image 2</span>
  <div style="background-image:url(3.jpg)">
    <span class="name">Image 3</span>

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

<script src="//"></script> 
<script src="fsbanner.js"></script> 

4. Initialize the plugin on document ready and done.


5. Plugin's default options.


  // show image descriptions

  // update other slides

  // set default values for slides

  // or 'mouse'

  // 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.

  // callback

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