Веб-разработка

индекс
236,88

7 мощных каруселей изображений для Web-дизайнеров

Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.
Если вы хотите предложить другие интересные решения на эту тему, пожалуйста, оставьте комментарий. Спасибо!

1. Agile Carousel


Agile CarouselAgile Carousel является jQuery-плагином, позволяющим создать крайне гибкую карусель с расширенным набором настроек. Он поддерживает текст и изображения в каждом фрейме и навигатор для отображения, в каком именно фрейме Вы находитесь. Взгляните сюда, чтобы увидеть ее в действии, это мой абсолютный фаворит!

2. Yahoo! UI Carousel Control


Yahoo! UI Carousel ControlYahoo! UI Carousel Control предоставляет виджет для просмотра ряда похожих объектов, выстроенных вертикально или горизонтально в регионе-оверлее на странице. Метафора «карусели» вытекает из аналогии с каруселью слайдов в дни пленочной фотографии; виджет карусели может следовать этой метафоре, позволяя непрерывную навигацию по кругу через все фреймы содержания.

3. jCarousel


jCarouseljCarousel является плагином jQuery для управления списком блоков в горизонтальном или вертикальном порядке. Блоки, которые могут содержать статичный HTML, или загружать содержимое через (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без таковой).

4. jCarousel Lite


jCarousel Lite является плагином для jQuery, который отправляет Вас в путешествие по карусели изображений и HTML-содержания. Проще говоря, вы можете перемещаться по изображениям и/или HTML в стиле карусели, используя данный виджет. Этот плагин крайне лёгок, примерно 2 КБ, но очень гибок и настраиваем с учетом большинства наших потребностей.

5. Простая карусель изображений в стиле Flickr


Простая карусель изображений в стиле FlickrВ этом руководстве показано, как реализовать карусель просто из набора изображений, чтобы создать слайд-шоу в стиле Flickr с использованием библиотеки Prototype-UI.
 

6. iCarousel


iCarouseliCarousel является мощной каруселью, построенной с использованием MooTools v1.1, полностью настраиваемой пользователей всего за несколько шагов. Вы можете изменить любой параметр по умолчанию просто инициализируя класс объектом настроек в формате JSON. Эта карусель протестирована в Internet Explorer, Firefox, Opera и Safari.

7. Carousel.us


Carousel.usCarousel.us является современной трёхмерной Javascript-каруселью, которая использует, как основу, или MooTools и Reflection.js от Кристофа Бейлза, или Prototype.js и script.aculo.us совместно с Reflection.js. Взгляните сюда, чтобы увидеть ее в действии.
+34
15 мая 2009, 16:28
251

комментарии (28)

0
alexeydg #
юзаю jCarousel, но бывает глючит при небольшом количестве фоток
0
zhuzhu #
jCarousel — в IE6 две карусели вырубают страницу полностью. Дерутся что ли?
0
akzhan #
подвиг уже то, что под IE6 она работает ) мне всегда наибольшие хлопоты доставляет именно IE6 :)
0
zhuzhu #
Да нет, работает, правда вот глюк пошел — вместо последней фотки — пустое место, хотя в html виден. В общем ку-ку.
За обзор спасибо. На некоторых сайтах без таких «фишек» скучно. )))
НЛО прилетело и опубликовало эту надпись здесь
0
hellohaos #
Спасибо — интересно.
+2
DimanX #
картинки пропали :(
0
syndicut #
3d карусель только carousel.us умеет?
+2
Jameson #
устарело, но эфффект славный:
eyecon.ro/spacegallery/
0
akzhan #
кстати, да. красиво. жаль только, исключительно последовательно.

но очень красиво ) надо подумать )
+1
makis #
Обратите внимание на TiltViewer. Один из немногих вариантов, где я полностью поддерживаю применение Flash. Вот пример.
0
homm #
имхо, бесполезный и мешающий эффект трехмерности. Было бы тоже самое на плоскости — можно было бы пользоваться.
0
b3atb0x #
Мне ОЧЕНЬ нравится проект spaceforaname.com/galleryview

0
DeMx #
Последний скрипт — жесть. Кому и для чего такое может понадобиться — непонятно.
0
homm #
Вообще говно какое-то. Базируется не на ДОМ-модели, картинки нужно в скрипте указывать, скорость прокрутки зависит от скорости прорисовки, все сделано на глобальных функциях и переменных. При этом реальной пользы 0, место не экономит, только мельтешит пестрыми красками.
0
Elected #
оYahoo! UI Carousel Control — много работал с ней. Из тех что тут, самая навороченная, но и самая громоздкая (помню та версия которую копал, весила 150кб)
0
McDEN #
вот спасибо! как раз сейчас для меня очень актуально, два дня парюсь делаю сам, точней сделал за полдня, остальное время пытаюсь заставить работать это в IE6 :(
0
kerberos #
никто не знает скрипт/плагин, желательно на jQuery с эффектом как на zvezdi.ru?
(при перемещении курсора над областью меняется скорость + все циклично)
0
eolexe #
Carousel.us — помойму жутко не удобная штука, попасть курсором по желаемой картинке просто нереально.
0
andylife #
jCarousel Lite + прокрутка колесом мыши, вот что удобнее всего.
ka.nnov.ru/process/jcarousel/
но при большом количестве изображений лучше дополнительно подгружать через Ajax.
0
handymade #
Carousel.us — порадовала, прям так и хочется кудаить пристроить попробовать!
правда немного угловатая и дерганая, надо будет подкрутить ))
0
Awax #
Вот еще очень хорошая каруселька jquery.scrollable
www.flowplayer.org/tools/scrollable.html
0
sanch3z #
Вот скрипт который мне до сих пор нравится. Позволяет прокручивать фотографии, как в режиме коверфлоу на маке или на айфоне
imageflow.finnrudolph.de/
0
akzhan #
красиво )
0
nickon #
также юзаю jCarousel, но там есть пару подводных камней…
сама карусель фиксированная (выводится только конкретное число фоток) что при использовании резинового диза есть не очень хорошо… проблема решается убрав visible и «руками» устанавливать $("#...").css('width',… )
2й камень — это растянув как следует карусель (на 22'' мониках актуально) при прокрутке пропадают 3-4 картинки потом при дальнейшей прокрутке появяются… мелочь, а не приятно ;)
0
romy4 #
моя самописная карусель :)
romy4.bigbord.net/carousel/carousel.html
0
Sergiush #
Подскажите пожалуйста, как в jcarousel можно сделать, что бы при нажатии на значек «Далее» прокручивалась не одна, а две карусели.
0
Elm #
Помогите, пожалуйста, интегрировать iCarousel в CMS Santafox! Сам в js мало что понимаю, попытки не удались.

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