Листалка слайдов Tiny Carousel

Tiny Carousel — маленькая по весу, но достаточно интересная галерея, в которой реализован весь основной необходимый функционал. Актуальная версия на момент написания статьи — 1.9.

Демо-пример — минимум возможностей, просто листалка слайдов.

Проверено в:

• IE 6-8
• Firefox 3+
• Opera 9.5+
• Safari
• Chrome

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.tinycarousel.min.js (2.9 Kb) — минимизированная версия или полная jquery.tinycarousel.min.js (4.36 Kb), для любителей покопаться в коде.
• buttons.png (4.28 Kb) пример картинки-стрелки.

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>

Основа галереи — список. Отдельные li станут слайдами. Добавляем кнопки прокрутки и обрамляем все это дело в контейнер. Должен получиться вот такой код:

<div id="slider">
	<a class="buttons prev" href="#">left</a>
	<div class="viewport">
		<ul class="overview">
			<li><img src="images/picture1.jpg" /></li>
			<li><img src="images/picture2.jpg" /></li>
			<li><img src="images/picture3.jpg" /></li>									
			<li><img src="images/picture4.jpg" /></li>
			<li><img src="images/picture5.jpg" /></li>
			<li><img src="images/picture6.jpg" /></li>
		</ul>
	</div>
	<a class="buttons next" href="#">right</a>
</div>

Прописываем стили:

#slider { height: 1%; overflow:hidden; padding: 0 0 10px;   }
#slider .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider .buttons { background:url(images/buttons.png) no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider .disable { visibility: hidden; }
#slider .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

Тут, конечно, нужно подкорректировать под свой размер слайдов и элементов управления. И не забудь положить в нужное место картинку buttons.png (или нарисовать свою).

Инициализируем галерею:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#slider').tinycarousel();	
});
</script>

Все! Простейшая галерея готова к работе.

А теперь подробнее

Как всегда, основа настройки — параметры вызова функции tinycarousel().

Параметры tinycarousel()

Пример инициализации c параметрами

Отключаем стрелки перемотки, задействуем послайдовую навигацию, переключение без анимации:

jQuery('#slider').tinycarousel({
	controls: false,
	pager: true,
	animation: false
});

Галерея с постраничной навигацией

<div id="slider-code">
    <a href="#" class="buttons prev">left</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/picture1.jpg"></li>
            <li><img src="images/picture2.jpg"></li>
            <li><img src="images/picture3.jpg"></li>
            <li><img src="images/picture4.jpg"></li>
            <li><img src="images/picture5.jpg"></li>
            <li><img src="images/picture6.jpg"></li>                            
        </ul>
    </div>
    <a href="#" class="buttons next">right</a>
    <ul class="pager">
        <li><a rel="0" class="pagenum" href="#">1</a></li>
        <li><a rel="1" class="pagenum" href="#">2</a></li>
        <li><a rel="2" class="pagenum" href="#">3</a></li>
        <li><a rel="3" class="pagenum" href="#">4</a></li>
        <li><a rel="4" class="pagenum" href="#">5</a></li>
        <li><a rel="5" class="pagenum" href="#">6</a></li>
    </ul>
</div>

#slider-code { height: 1%; overflow:hidden; padding: 0 0 10px;   }
#slider-code .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider-code .buttons { background:url(images/buttons.png) no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider-code .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider-code .pager li { float: left; }
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider-code .active { color: #fff; background-color:  #555555; }

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#slider-code').tinycarousel({ pager: true });	
});
</script>

Демо-пример.

Проверено в:

• IE 6-8
• Firefox 3+
• Opera 9.5+
• Safari
• Chrome

Программное управление.

Для программной перемотки карусели служит метод tinycarousel_move(). Кроме того, нам доступны методы tinycarousel_stop() и tinycarousel_start(). Для того, чтобы до всех их добраться, нужно создать объект-карусель. Делается это очень просто, например, так:

var oSlider = jQuery('#slider');

oSlider.tinycarousel({ interval: true });

Теперь каруселькой можно управлять — перематывать в нужную позицию (без стандартного пейджера) или запускать/останавливать автопрокрутку (я не зря при инициализации передал параметр interval: true).

// Переходим на 4-й слайд при клике на элементе с id='#gotoslide4'
jQuery('#gotoslide4').click(function(){ 
	oSlider.tinycarousel_move(4);
	return false;
});

//Запускаем автоперемотку
jQuery('#startslider').click(function(){ 
	oSlider.tinycarousel_start();
	return false;
});

//Останавливаем автоперемотку
jQuery('#stopslider').click(function(){ 
	oSlider.tinycarousel_stop();
	return false;

Плюсы:

• маленькая по весу;
• удобная и быстрая в настройке.

Минусы:

• не поддерживает колесико мыши;
• при автоперемотке, дойдя до конца, быстренько перематывается в начало. Конечно, субъективное мнение, но лично мне этот эффект не понравился.

Материал:

• jquery plugin :: Tiny Carousel