jQuery Infinite Content Slider Plugin - gallerot
File Size: | Unknown |
---|---|
Views Total: | 1206 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

gallerot is a lightweight (~4kb unminified) jQuery plugin for creating an Html content slider with smooth sliding effects.
Features:
- Infinitely looping between slides.
- Custom sliding controller.
- Auto sliding on load.
- Stop sliding if mouse over the slider.
How to use it:
1. Create the html for the slider as follows.
<!-- Slider Left Control --> <div id="gallerot-left" class="slider-left-control" title="Slide left"><<</div> <!-- Slider --> <div class="slider-container"> <div id="gallerot"> <ul> <li> <div class="slide-box"> <div class="picture"> <img src="./images/1.png" width="301"> </div> <span class="caption">New York #1</span> </div> </li> <li> <div class="slide-box"> <div class="picture"> <img src="./images/2.png" width="301"> </div> <span class="caption">New York #2</span> </div> </li> <li> <div class="slide-box"> <div class="picture"> <img src="./images/3.png" width="320"> </div> <span class="caption">New York #3</span> </div> </li> <li> <div class="slide-box"> <div class="picture"> <img src="./images/4.png" width="267"> </div> <span class="caption">New York #4</span> </div> </li> <li> <div class="slide-box"> <div class="picture"> <img src="./images/5.png" width="267"> </div> <span class="caption">New York #5</span> </div> </li> </ul> </div> </div> <!-- Slider Right Control --> <div id="gallerot-right" class="slider-right-control" title="Slide right">>></div>
2. Load the jQuery javascript library and jQuery gallerot plugin at the bottom of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.gallerot.js"></script>
3. Put the required styles in your CSS.
.gallerot-container { position: relative; margin: 0; padding: 0; border: none; overflow: hidden; } .gallerot-container > ul { position: relative; left: 0; margin: 0; padding: 0; list-style: none; border: none; } .gallerot-container > ul:before, .gallerot-container > ul:after { content: " "; display: table; } .gallerot-container > ul:after { clear: both; } .gallerot-container > ul > li { float: left; margin: 0; padding: 0; border: none; }
4. Call the plugin with options.
<script> $(document).ready(function() { $("#gallerot").gallerot({ width: 1000, // Width of base container. height: 200, // Height of base container. leftControl: '#gallerot-left', // Control for sliding left. rightControl: '#gallerot-right', // Control for sliding right. slidingSpeed: 1000, // Speed of sliding (milliseconds). enableAutoSliding: true, // If true the feature of auto sliding will be enabled. autoSlidingDelay: 3000, // Delay between sliding in the auto mode. stopAutoSlidingOnHover: true // // Stop sliding if mouse over the slider. }); }); </script>
This awesome jQuery plugin is developed by vadim-zverugo. For more Advanced Usages, please check the demo page or visit the official website.