View on GitHub

jQuery udSlider

Flacky slider on jQuery

Download this project as a .zip file Download this project as a tar.gz file

jQuery flacky slider plugin

  1. Load requirements
  2. Initialize slider
  3. Example usage

  • Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue tellus eleifend est ultricies scelerisque vel nec ex. Vivamus sapien orci, eleifend ac consectetur ut, venenatis in ligula.

  • Vivamus
    Vivamus quis lacinia tortor. Nullam est augue, eleifend id interdum in, feugiat sit amet felis.

  • Phasellus
    Phasellus viverra tortor in erat luctus, quis pretium augue ultrices. Phasellus quis vestibulum ipsum. Curabitur sed massa ex. Cras ac mi dapibus justo blandit aliquet.

  • Cum sociis
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Cras sit amet consectetur quam.

  • Praesent volutpat
    Praesent volutpat dolor rutrum velit porttitor, non suscipit tortor imperdiet. Sed et aliquam turpis. Mauris vulputate malesuada mauris ac egestas. Sed aliquam, metus vitae porttitor iaculis, neque nisl ultricies ante, vitae pellentesque sem magna id sem.

Load requirements

<!--jQuery-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!--UdSlider-->
<script src="./../source/udslider.js"></script>
<link href="./../source/udslider.css" rel="stylesheet">

Initialize slider

$(function(){
	$('#udslider').udslider({
		angle: 72,      // Skew angle, default 75
		count: 5,       // Limit visible sliders join main
		timer: 3500     // Time to autoslide, 0 - disable
	});
});

Example usage

    <ul class="udslider" id="udslider" style="height:340px;opacity:0;">
		<li>
			<img src="slider-pics/01-slider-picture.jpg" alt="">
			<img src="logo-slider/01-logo-slider.png" class="logo" alt="">
			<p>description first</p>
		</li>
		<li>
			<img src="slider-pics/02-slider-picture.jpg" alt="">
			<img src="logo-slider/02-logo-slider.png" class="logo" alt="">
			<p>description second</p>
		</li>
	</ul>