jQuery Infinite Content Slider Plugin - gallerot

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">&lt;&lt;</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">&gt;&gt;</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.