Слайдеры и карусели. Этими удобными элементами интерфейса пестрит любой сайт с появлением jQuery. Нет, конечно карусели и слайдеры и раньше были, но с появлением такого простого фреймворка все стало намного проще, вот и люди со всего света стали выпускать свои версии каруселей и слайдеров.

Думаю всем понятно, что слайдеры эти разделяются по быстродействию, простоте использования и весу. Собственно хочу рассказать вам о плагине, который мне понравился больше всего. Именно его я использую в своих проектах.

Посмотрим сразу как использовать этот плагин:

// В секции head
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />

// После тэга body
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>

<ul id="mycarousel">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>

Размер картинок тут указан для каждой, пример взят с официального сайта. Я же рекомендую прописать в CSS размер для этих картинок, чтобы легко менять и сэкономить на html аттрибутах.

Как видно из примера, встраивается слайдер очень просто. Пример.

А можно ли настроить это слайдер? Конечно! Он может быть анимированным, вертикальным, с автоскроллингом, с автоподзагрузкой и многим другим каким вы захотите. В конце поста есть ссылка на все примеры.

Но давайте я расскажу о некоторых параметрах слайдера. Указываются они внутри секции jcarousel.

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});

Давайте рассмотрим теперь некоторые параметры:

  • vertical (bool): true - вертикальное расположение, false - горизонтальное
  • size (integer): количество скролируемых элемантов (по умолчанию берется количество li с картинкой)
  • scroll (integer): количество элементов в скроллинге

Остальную кучу параметров можно найти в документации.

Собственно добро пожаловать на официальный сайт jcarousel (качать там же), надеюсь он вам тоже понравится.

(Visited 224 times, 1 visits today)