Submit your widget

jQuery fsbanner Plugin Examples

Created about a year ago   Views 5436   downloads 1322    Author jqueryscript
jQuery fsbanner Plugin Examples
View DemoDownload 42.8 KB
16
Share |

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.

Read more:http://www.jqueryscript.net/slider/Small-Background-Accordion-Slider-With-jQuery-fsbanner.html

Tag: accordion