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