Fade Slider

[Heidel]

HTML

<ul id="slider1" class="images-list">
							<li style="background: red">11</li>
							<li style="background: green">22</li>
							<li style="background: blue">33</li>
						</ul>
						
						<ul class="controls">
							<li class="active"></li>
							<li></li>
							<li></li>
						</ul>

jQuery

$.fn.slider = function () {
		var $this = this;
		var $controls = $this.nextAll('.controls').first();
		var index = 0;
		var n = 2;
	    
		$this.find('li:gt(0)').hide();
	    setInterval(function () {
	        $this.find('li:first-child').fadeOut('slow')
				.next('li').fadeIn('slow')
	            .end().appendTo($this);
			
			if ($controls.find('li.active').next('li').length) {
				$controls.find('li.active').removeClass('active').next('li').addClass('active');
			} else {
				$controls.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
			};
	    },
	    4000);
	};


$('#slider1').slider();

http://jsfiddle.net/u9d3xa1q/17/

С индексами
http://jsfiddle.net/9a24rdro/2/

@темы: Plugins, Верстка, jQuery, Fade Slider, Ссылки