Создание тянущейся карусели с помощью jQuery + jCarousel

Суббота, 29 августа 2009 г.

В этой статье хотелось бы рассмотреть создание карусели изображений (и не только) со 100% шириной. Для примера будем делать карусель новостей. Каждая новость — отдельный блок фиксированный как по вертикали, так и по горизонтали, содержащий картинку, заголовок и краткий анонс. Для реализации используем популярный js-фреймворк jQuery и плагин для создания каруселей — jCarousel.

То, что в итоге у нас получится можно посмотреть здесь.

Для начала скачиваем последнюю версию jQuery (http://jquery.com/) и плагин jCarousel (http://sorgalla.com/jcarousel/). На момент написания статьи последние версии jQuery 1.3.2 и jCarousel 0.2.3.

Подключаем jQuery и jCarousel к нашей странице. Из jCarousel нам понадобится сам файл плагина (jquery.jcarousel.pack.js) и файл со стилями (jquery.jcarousel.css). Теперь все необходимые инструменты у нас есть. Создаём список новостей:

<div class="b-news">
	<ul>
		<li>
			<div class="picture"><img src="images/news1.jpg" width="300" height="200" alt=""></div>
			<div class="title">Новость номер 1</div>
			<div class="desc">Краткий анонс первой новости</div>
		</li>
		...
		<li>
			<div class="picture"><img src="images/news8.jpg" width="300" height="200" alt=""></div>
			<div class="title">Новость номер 8</div>
			<div class="desc">Краткий анонс восьмой новости</div>
		</li>
	</ul>
</div>

Инициализация карусели довольно простая:

$(document).ready(function(){
	$('.b-news UL').jcarousel({ scroll: 1 });
});

Параметр scroll определяет сколько блоков прокручивать за раз.

Теперь пропишем стили для карусели. Нам нужно задать width: 100% для контейнера, определить размеры элементов, а также местоположение и внешний вид кнопок управления (прокрутка вперед/назад). В коде даны комментарии:

/* Растягиваем контейнер на 100% по ширине */
.b-news .jcarousel-container-horizontal { width: 100%; }
.b-news .jcarousel-clip-horizontal { width: 100%; }

/* Задаем размер одного блока */
.b-news .jcarousel-item, .b-news .jcarousel-list LI { width: 310px; height: 250px; }

/* Задаем внешний вид и расположение кнопок управления */
.b-news .jcarousel-next-horizontal {
	position: absolute;
	top: 80px;
	right: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: transparent url(../images/btn_next.gif) no-repeat 0 0;
}
.b-news .jcarousel-next-disabled-horizontal,
.b-news .jcarousel-next-disabled-horizontal:hover,
.b-news .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -30px 0; }
.b-news .jcarousel-prev-horizontal {
	position: absolute;
	top: 80px;
	left: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: transparent url(../images/btn_prev.gif) no-repeat 0 0;
}
.b-news .jcarousel-prev-disabled-horizontal,
.b-news .jcarousel-prev-disabled-horizontal:hover,
.b-news .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -30px 0; }

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

Пример к статье

Скачать пример ⁴⁹⁹ (jcarousel_100p.zip, ~160Kb) | Посмотреть пример

Работоспособность была проверена в следующих браузерах:

Mozilla Firefox 3.5
Opera 9.64
Safari 4 (win)
Internet Explorer 6, 7, 8

Рубрика: CSS и Верстка | Тэги: jCarousel, jQuery

RIDDICK (анонимно)

18.10.2009, 10:54:13

Спасибо. как раз искал резиновую карусель.

Вопрос образовался:

Как сделать чтобы кнопка prew была тоже с правого конца как и next?
Niko

18.10.2009, 16:46:20

Это можно сделать с помощью CSS.

Вот здесь .b-news .jcarousel-prev-horizontal заменить left: 15px; на right: 50px;
RIDDICK (анонимно)

19.10.2009, 17:18:31

Блин точно. Спасибо. А то я делал left 90% и при разных разрешениях кнопки на разных расстояниях друг от друга находились. Потому хотел узнать где в JS указывается расположение кнопок. Оказалось все намного прощею
Михаил (анонимно)

06.02.2010, 00:01:55

А как сделать так чтобы новости отображались не от 1й к 8й а от 8й к 1й.

Т.е чтобы последующие новости были не справа а слева?

Заранее благодарен.
Niko

08.02.2010, 19:09:27

Михаил, а что мешает выводить новости именно в нужном порядке?
Андрей (анонимно)

09.02.2010, 15:27:13

Здравствуйте! У меня такая проблема: если на странице есть таблицы, то плагин неправильно работает. Что посоветуете?
Niko

09.02.2010, 16:34:27

Андрей, не видя страницы - не реально понять в чем у вас проблема.

Связи между таблицами и плагином я не вижу.
Андрей (анонимно)

09.02.2010, 17:54:43

Спасибо за оперативный ответ. У меня неправильно работает плагин, когда вывод картинок находится внутри таблицы. Вы не пробовали помешать вывод картинок в таблицу? Может, это у меня просто что-то не так...
Niko

10.02.2010, 13:28:25

Андрей проблема у вас не в таблице...

Нужно смотреть конкретную страницу. Свяжитесь со мной (см. раздел контакты) - возможно смогу вам помочь.
Михаил (анонимно)

14.02.2010, 02:03:20

Niko, я просто пытаюсь использовать такую карусель в системе управления.

Там у меня сделан модуль предыдущие матчи. Отображается один блок (самая последняя игра), остальные появляются при прокрутке(предыдущие).

Каждая игра это страница на сайте, соотв. добавляя страницу я добавляю новую игру (она получ последней), ну и предыдущие игры соотв. сдвигаются.

Ну и получается что предыдущие игры отображаются при прокрутке вправо.(как у вас примере- 1я новость слева, 8я справа) Хотя логичнее если они будут слева.

Просто может есть какая-то функция , которая инвертирует положение? Я просто в ява не силен,поэтому..
Ivan (анонимно)

17.02.2010, 00:18:14

Возникло пару вопросов:

1. Как отключить функцию, когда мы наводим мышку и листаем, она останавливается. Как ее заставить дальше прокручиватся?

2. Как уменьшить скорость вращения?
Аноним (анонимно)

16.03.2010, 17:15:26

Как и что нужно прописать, чтобы заработала прокрутка колесиком?

$(document).ready(function(){

$('.b-news UL').jcarousel({ scroll: 1,mouseWheel: true });

});

Не работает... Все пути правильные.

Кто-нибудь с этим уже сталкивался? Помогите :)
Банкир (анонимно)

29.03.2010, 15:56:05

двум последним комментаторам советую почитать мануал к фреймворку jQuery =) там есть информация о том, каак подключать функции)
Дмитрий (анонимно)

29.03.2010, 19:09:13

Помогите пожалуйста!

У меня ниче не работает. Выводит все картинки разом линию.
Niko

01.04.2010, 12:15:00

Дмитрий, возможно у вас в браузере отключен JavaScript. Или где-то ошибка в JS из-за чего приостанавливается работа скриптов.
scratch (анонимно)

06.04.2010, 15:09:15

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

В итоге - на одном CSS проблема не решается. Необходимо пересчитывать ширину и интервал перемещения картинки при каждом изменении окна браузера, все это делается непосредственно в плагине с помощью resize(}.

Например, так:

$(window).resize(function(){

li.css({width: width(li), height: li.height()});

});

Не путайте понятия "тянущейся" и "бесконечной" (или как её ещё назвать?) карусели.
Andrei (анонимно)

25.05.2010, 01:17:52

Здравствуйте, у меня есть проблема. jCarousel работает идеально в Firefox, но не в опере. Я покажу вам скриншот.Почему это происходит?

http://img717.imageshack.us/img717/181/5235.jpg
Andrei (анонимно)

25.05.2010, 01:30:20

иногда и так: http://img194.imageshack.us/img194/5820/twtewrytewr.jpg
Andrei (анонимно)

25.05.2010, 01:31:14

Здравствуйте, у меня есть проблема. jCarousel работает идеально в Firefox, но не в опере. Я покажу вам скриншот.Почему это происходит?

http://img717.imageshack.us/img717/181/5235.jpg

http://img194.imageshack.us/img194/5820/twtewrytewr.jpg
Andrei (анонимно)

25.05.2010, 10:43:40

Здравствуйте, у меня есть проблема. jCarousel работает идеально в Firefox, но не в опере. Я покажу вам скриншот.Почему это происходит?

http://img717.imageshack.us/img717/181/5235.jpg

http://img194.imageshack.us/img194/5820/twtewrytewr.jpg

Помогите пожалуйста :(
Niko

25.05.2010, 11:16:05

Andrei, похоже, что где-то косяк в CSS...
Alex (анонимно)

25.05.2010, 15:16:57

Всем привет, все работает, но как сделать в примере http://www.predvoditelev.ru/examples/jcarousel_100p/ чтобы было вращение по кругу а не от одного конца до другого.

Пробовал:

$(document).ready(function(){

$('.b-news UL').jcarousel({ scroll: 1, wrap:'circular' });

});

по идее должно работать, но промотка но после промотки существующих блоков повторений нет и просто пустое поле

помогите, пожалуйста
Alex (анонимно)

25.05.2010, 16:02:38

разобрался, дело в версии библиотеки карусели

с библиотекой http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js

по кругу карусель работает:

jQuery(document).ready(function() {

jQuery('.b-news UL').jcarousel({

scroll: 1,

wrap: 'circular'

});

});
cy6eria (анонимно)

27.07.2010, 10:47:10

2 Alex

Поменяйте wrap: null на wrap:"circular" и будет счастье.

Оставить комментарий

Не регистрировать/аноним

Ваше имя:

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email.

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