Javascript - Простой слайдер на jQuery

1. Главная
2. База знаний
3. Javascript - Простой слайдер на jQuery

Хочу предложить вам к использованию простой, удобный, легко расширяемый слайдер на jQuery, который содержит минимум настроек, а именно: селектор контейнера, селектор элемента, задержка, скорость анимации.

Демонстрация работы приведенного плагина доступна по этой ссылке.

Ниже привожу фрагменты исходного кода, которые необходимы непосредственно для работы слайдера.

HTML

<div class="custom-slider">
    <div><img src="img/Desert.jpg" alt=""/></div>
    <div><img src="img/Hydrangeas.jpg" alt=""/></div>
    <div><img src="img/Tulips.jpg" alt=""/></div>
</div>

CSS

.custom-slider {
	position: relative;
}

.custom-slider > div {
	position: absolute;
}

.custom-slider, .custom-slider > div > img {
	width:100%;
}

JAVASCRIPT

jQuery(document).ready(function()
{
	$.simpleSlideshow({
		container : '.custom-slider', // Селектор контейнера с элементами
		item : 'div', // Селектор элемента
		delay : 3000, // Задержка между сменой элементов в миллисекундах
		speed : 1000, // Скорость анимации элементов в миллисекундах
	});
});


;(function($)
{
	$.simpleSlideshow = function(options)
	{
		var plugin = this;

		plugin.settings = $.extend({ container : 'ul.slideshow', item : 'li', delay : 1000, speed : 500 }, options || {});
		
		plugin.setSlideshow = function()
		{
			$(plugin.settings.container).each(function(i, box)
			{
				$(' > ' + plugin.settings.item + ':gt(0)', $(box)).hide();
				
				setInterval(function()
				{
					$(' > ' + plugin.settings.item + ':first', $(box))
					.fadeOut(plugin.settings.speed)
					.next()
					.fadeIn(plugin.settings.speed)
					.end()
					.appendTo($(box));
				},
				plugin.settings.delay);
			});
		};
		
		plugin.setSlideshow();
	}
})(jQuery);