Рабочие заметки вебмастера

jQuery Looped Slider

Сегодня мы будем использовать jQuery loopedSlider от Nathan Searles. Плагин к jQuery решает простую проблему, зацикливает слайдер.

Данный пример не будет сложным, можно просто копировать код и вы получите свой зацикленный слайдер. Вы можете посмотреть рабочую демонстрацию и скачать исходный код.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>loopedSlider jQuery Plugin</title>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css" media="screen"></style>
    </head>
    <body>
        <div id="loopedSlider">
            <div class="container">
                <div class="slides">
                    <div><img src="image-01.jpg" width="600" height="393" alt="First Image" /></div>
                    <div><img src="image-02.jpg" width="600" height="393" alt="Second Image" /></div>
                    <div><img src="image-03.jpg" width="600" height="393" alt="Third Image" /></div>
                    <div><img src="image-04.jpg" width="600" height="393" alt="Fourth Image" /></div>
                </div>
            </div>
            <a href="#" class="previous">previous</a>
            <a href="#" class="next">next</a>
            <ul class="pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div>
    </body>
</html>

CSS

/*
* Required
*/
.container {width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer;}
.slides {position:absolute; top:0; left:0;}
.slides div {position:absolute; top:0; width:600px; display:none;}
/*
* Optional
*/
#loopedSlider,#newsSlider {margin:0 auto; width:500px; position:relative; clear:both;}
ul.pagination {list-style:none; padding:0; margin:0;}
ul.pagination li  {float:left;}
ul.pagination li a {padding:2px 4px;}
ul.pagination li.active a {background:blue; color:white;}

Тюнинг слайдера

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

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider();
			});
        </script>
    </body>
</html>

Автостарт слайдера:

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider({
					autoStart: 3000
				});
			});
        </script>
    </body>
</html>

Инициализация нескольких слайдеров:

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('#loopedSlider').loopedSlider({
					autoStart: 3000
				});
				$('#anotherSlider').loopedSlider({
					autoHeight: 400
				});
			});
        </script>
    </body>
</html>

Демонстрация нескольких слайдеров и слайдера с автостартом

Заключение

Мне очень нравится простота этого плагина и думаю я буду его использовать в будущих своих проектах. А что скажите вы? Доводилось ли вам ранее использовать jQuery loopedSlider? Какие другие jQuery слайдеры вы можете порекомендовать? Спасибо за внимание.

Оригинал статьи