jQuery & Bootstrap Based Elegant Slider/Carousel Plugin - slidey

jQuery & Bootstrap Based Elegant Slider/Carousel Plugin - slidey
File Size: 2.94 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

slidey is a simple yet powerful jQuery & Bootstrap based image slider plugin designed to meet all your needs about web sliders, galleries, carousels and slideshows. Fully responsive design based on the Bootstrap's grid system.

How to use it:

1. Load the necessary jQuery library and Bootstrap's stylesheet in the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery-1.12.4.min.js"></script>

2. Load the Font Awesome 4 for the slidey's navigation icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

3. Download and load the jQuery slidey plugin's JS & CSS files in the document.

<link href="dist/jquery.slidey.min.css" rel="stylesheet">
<script src="jquery.slidey.js"></script>

4. Insert a list of images together with the titles and descriptions into the slider.

<div id="slidey" style="display:none;">
  <ul>
    <li><img src="1.jpg">
      <p class="title">Title 1</p>
      <p class="description">Description 1</p>
    </li>
    <li><img src="2.jpg">
      <p class="title">Title 2</p>
      <p class="description">Description 2</p>
    </li>
    <li><img src="3.jpg">
      <p class="title">Title 3</p>
      <p class="description">Description 3</p>
    </li>
  </ul>                    
</div>

4. Initialize the slidey plugin and we're done.

$("#slidey").slidey();

5. Config the slidey plugin with the following options.

$("#slidey").slidey({
  interval: 3000,
  listCount: 5,
  showList: true,
  showNodes: false,
  nodeContainer: ""
});

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