Карусель для сайта
Здравствуйте, сегодня я хочу написать пост о карусели 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
(в исходниках есть все нужные скрипты для данной карусели)
Если у вас есть вопросы, то задавайте их в комментариях, постараюсь ответить.
19 thoughts on “Карусель для сайта”
Добавить комментарий
Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.
Добрый день, спасибо за статью, получилось все. Только мне не нравится, что после клика на картинку в карусели, всплывает предупреждающее окно о срабатывании джава скрипта, нужно согласиться и только потом переходишь по ссылке. У вас кстати также работает карусель в верхнем правом углу. Можно от этого избавиться?
Решила этот вопрос так:
в файле jsCarousel-2.0.0.js удалить 81 строку: settings.onthumbnailclick($(this).attr(‘src’));
Да мне говорили про это сообщение, но у меня оно почему то не появлялось. Спасибо что нашли развязку:)
Здравствуйте, поставил ваш слайдер, работает для красоты нормально. Но вот когда захотел поставить ссылки на картинки слайдер перестаёт работать. Может подскажите в чём проблема.
Здравствуйте sival, можете показать каким образом вы ставите ссылку?
Ссылку я вставляю сюда:
<div>
<a href=»ссылка» rel=»nofollow»><img alt=»» src=»{tpl_url}/demo/img_1.jpg» /><br />
<span class=»thumbnail-text»>Image Text</span>
</div>
sival у вас нету закрывающего тега
Спасибо admin , действительно всё оказалось до банального просто
Спасибо за инструкцию, все получилось!
как убрать авто-прокрутку?
artes, вам нужно в скрипте вместо autoscroll: true прописать это autoscroll: false
Спасибо! Всё работает. То что нужно!
Был вопрос про срабатываение скрипта, но спасибо Насте, самому читать код не пришлось)))
Помогите пожалуйста изменить количество выводимых за раз картинок.Очень надо!
Ниже Vlad уже ответил на Ваш вопрос
Здравствуйте! Поставил Ваш слайдер, как сделать чтобы прокручивалось больше 3-х картинок? (в моем случае четыре)
Нашел самостоятельно :) Изменил количество в свойстве itemstodisplay: .
Другой
При увеличении количества прокручиваемых изображений нужно высоту карусели менять в стилях что ли?
Когда меняю высоту кривовато работает. слайд на слайд налазит и на кнопку, во время прокрутки.
Имею ввиду вертикальную ориентацию.
А каким образов вы ее используете? Вертикальная или горизонтальная? Все блоки одинаковые по высоте?
Здравствуйте! Подскажите как сделать вертикальным.