Skip to content

Latest commit

 

History

History
68 lines (49 loc) · 1.3 KB

README.markdown

File metadata and controls

68 lines (49 loc) · 1.3 KB

UGLA-Slider

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