Карусель для сайта
Здравствуйте, сегодня я хочу написать пост о карусели jquery для сайта. Называется этот плагин jQuery Content/Thumbnail Slider V2.0: jsCarousel V2.0. Понравился он мне тем, что содержимым в карусели могут быть не только изображения но и видео, новости, контент и другое. В первоначальном виде, видны 5 блоков с изображениями.
Пример можете посмотреть Здесь, или посмотрите на его работу в шапке моего сайта (справа вверху).
Плюсы карусели:
- Есть возможность установить как вертикальный, так и горизонтальную карусель.
- Смену слайдов можно включить в автоматическом режиме.
- Использовать в карусели можно любой контент (видео, изображения, блоки (div)).
- Использовать карусель можно как мини галерею.
- Не конфликтует с другими скриптами (по крайней мере, у меня еще такого не было )
Есть конечно один минус (надеюсь разработчики, или разбирающиеся люди исправят это баг) — при многократном нажатии на кнопки переключения слайдов. они перестают работать, но при скроле страницы или ее обновлении опять работают.
Но все же если вам подходит эта карусель jquery для вашего сайта, то вот несколько шагов чтобы ее установить.
ШАГ1 — подключаем нужные скрипты и стили для работы данного плагина.
*Все стили и скрипты нужно помещать между тегами <HEAD></HEAD>
Вам нужно подключить jquery библиотеку, лучше всего с google (почему именно с гугла я уже писал в этом посте — пункт первый). Вот пример:
после этого нужно подключить jquery скрипт самой карусели:
<script src="jsCarousel.js" type="text/javascript"></script>ну и конечно же стили для нее:
<link href="jsCarousel.css" rel="stylesheet" type="text/css" />Чтобы наша карусель заработала, нужно также вставить маленький скрипт:
<script type="text/javascript">
$(document).ready(function() { $('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true }); });</script>ШАГ 2 — в нужное место нашей страницы вставляем html-код нашей карусели:
<div id="wrapper">
<div id="jsCarousel"> <div> <img src="images/img_1.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_2.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_3.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_4.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_5.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_6.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_7.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_8.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_9.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_10.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_11.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_12.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_13.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_14.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_15.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> <div> <img src="images/img_16.jpg" /><br /> <span class="thumbnail-text">Image Text</span></div> </div> </div>*Где img_1.jpg — img_16.jpg это наши изображения.
СКАЧАТЬ ИСХОДНИКИ ВЫ МОЖЕТЕ ЗДЕСЬ —> jsCarousel2.0.0
(в исходниках есть все нужные скрипты для данной карусели)
Если у вас есть вопросы, то задавайте их в комментариях, постараюсь ответить.