[...] it slides back to the beginning, after reaching the end [...]
Tested on
- Chrome (Mac)
- Firefox (Mac)
- Safari (Mac)
**DEMO**
DEMO 1 (mobile touch develop branch)
DEMO 2
DEMO 3
Usage: You need a wrapper (in this example called ".slider") and put your contents each in a "container" within that wrapper
<div class="slider">
<div class="container">
Content Page 1
</div>
<div class="container">
Content Page 2
</div>
<div class="container">
Content Page 3
</div>
<div class="container">
Content Page 4
</div>
</div>
Call uglaSlide() on the wrapper ".slider"
$(document).ready(function(){
$(".slider").uglaSlide();
});
It will by default prepend a "<<" and ">>" link-set. If you want to place your own links, feel free to do so, just tell the plugin where to find them. Also the speed for the animations can be optionally adjusted (standard is 0.5s)
$(".slider").uglaSlide({
left: $(".slider.left"),
right: $(".slider.right"),
speed: "0.5s",
});
Contents:
- ugla-slider.js
- index.html