Minimal jQuery Content Carousel Slide Plugin - ListBox

File Size: 6.33 KB
Views Total: 913
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Content Carousel Slide Plugin - ListBox

ListBox is a tiny and easy-to-use jQuery plugin that transforms a list of html content into a vertical or horizontal carousel slider with next / prev navigation.

How to use it:

1. Load the style.css in the head section for basic carousel styles.

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

2. Add a list of html content into the carousel. The plugin's options can be passed via data-OptionName attributes set in the top element as follow.

<div class="listbox lightThem" 
     data-orientation="vertical" 
     data-step="512">
  <ul>
    <li><img src="1.png"></li>
    <li><img src="2.png"></li>
    <li><img src="3.png"></li>
  </ul>
</div>

3. Load jQuery library and the jQuery ListBox plugin at the end of the document.

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

4. Initialize the plugin and done.

$('.listbox').ListBox();

5. Full plugin options.

orientation:  'horizontal', // value: horizontal | vertical
prevButton:   '#prev',
nextButton:   '#next',
step:     0,
duration:   500,
easing:     "swing" // "swing" or "linear"

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