Small Responsive Slider Plugin For jQuery - ubislider

File Size: 563 KB
Views Total: 2406
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small Responsive Slider Plugin For jQuery - ubislider

ubislider is an extremely simple and lightweight jQuery plugin that lets you present any web content in a responsive, navigatable slider UI.

More example:

How to use it:

1. Put the CSS in the head section of your HTML document.

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

2. Add a list of images together with the next and previous buttons to the carousel.

<div class="ubislider">
  <a class="arrow prev"></a>
  <a class="arrow next"></a>
  <ul class="ubislider-inner">
    <li>
      <img src="1.jpg">
    </li>
    <li>
      <img src="2.jpg">
    </li>
    <li>
      <img src="3.jpg">
    </li>
  </ul>
</div>

3. Put jQuery library and the JavaScript file ubislider.min.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ubislider.min.js"></script>

4. Initialize the slider by calling the plugin on the top DIV element as this:

$('.ubislider').ubislider();

5. Possible configurations with default values.

$('.ubislider').ubislider({
  item: elementThis,
  arrowsToggle: false,
  type: 'standard'
});

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