18 свежих jQuery плагинов для создания карусели

Содержание

Простая карусель на JQuery для любого сайта с автопрокруткой и подписями

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

Сразу оговорюсь о функционале — карусель с автопрокруткой, которую можно отключать или менять время самой прокрутки! Карусель может пролистывать фотографии только при нажатии стрелок вперед/назад. Многим веб мастерам нужна именно такая карусель. При большом желании ее можно легко доработать до автопрокрутки (по просьбам трудящихся уже сделал), например, используя периодический таймер в Java Script и зациклив действие на функции changeSlideMix().

Данная карусель работает на JQuery с небольшим скриптом. При клике на стрелку вперед или назад прокручивает строго по одной фотографии. Когда доходит до последней фото, то как бы перебрасывает первую в конец. Таким образом, получается красивая, как бы бесконечная прокрутка в карусели.

Особенность карусели еще в том, что она является адаптивной — как бы вы не уменьшали экран — она подстраивается под него (если ваши css стили не будут конфликтовать). Также можно установить несколько таких каруселей на сайте (но только без автопрокрутки (иначе меняйте селекторы в коде и каруселях)) — просто продублировав html код.

Некоторые особенности:
— Чтобы отключить автопрокрутку удалите или закомментируйте строку 20 в index.html.
— Чтобы изменить время прокрутки карусели в этой же строке поменяйте 2000 на свое число, где 1000 это 1 сек.
— Чтобы прокрутка шла слева направо поменяйте в 20 строке .slider-nextmix на .slider-prevmix
— Ширина самих блоков картинок сейчас 175px — меняется в ul.sm-slider li
— Обратите внимание на высоту карусели (.horizontal-slidermix) — сейчас 190px. При редактировании стилей, это может вам понадобится

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

Плагины каруселей на jQuery

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

Я специально не буду приводить в этой заметке 20-30, якобы популярных, плагинов. Считаю, что можно ограничится изучением 2-3 самых популярных, которые к тому же активно развиваются и поддерживаются.

Список популярных jQuery плагинов каруселей:

Slick: адаптивная и гибкая jQuery-карусель с множеством разнообразных настроек. Кажется разработчики решили предусмотреть всевозможные варианты использования своего плагина. Можно создавать как карусели, так и слайдеры.

Owl Carousel 2.2 – еще одна популярная адаптивная jQuery-карусель. Настроек не так много как у Slick, но тоже достаточно много, чтобы обеспечить всеми необходимыми инструментами для быстрого создания карусели или слайдера. Примеры использования Owl Carousel.

Bootstrap Carousel – плагин слайдера на jQuery от популярного web-компонента Bootstrap. Можно создавать различные слайдеры с кнопками контроля, миниатюрами и стрелками.

Как правило этих трех плагинов каруселей хватит чтобы полностью покрыть все потребности, которые могут возникнуть во время проектирования дизайна сайта. Ну а если не хватит – то в любое время можно дописать собственные события, по крайней мере у Slick и Owl Carousel такая возможность предусмотрена изначально.

carouFredSel – лучшая jQuery карусель

carouFredSel – достаточно мощный и простой плагин, позволяющий создавать различного рода карусели с обширным функционалом. Именно carouFredSel я использую уже продолжительное время в большинстве своих проектов. Конечно, кто-то может поспорить и предложить альтернативу данному плагину, но я на 100% уверен что ни один из них не сможет сделать то, что делает carouFredSel.

Преимущества

Чем же так хорош плагин carouFredSel? Ниже я перечислю основные преимущества carouFredSel:

  1. Бесплатный;
  2. Существует в виде плагина для WP. За плагин некоторым придется раскошелиться, но знающие разработчики найдут бесплатную версию тут — http://www.nulled.cc/;
  3. Простой;
  4. Отсутствие багов. (В отличие от iosslider или jCarousel где баг на баге сидит);
  5. Огромное количество настроек (http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced);
  6. Подробная документация (http://docs.dev7studios.com/jquery-plugins/caroufredsel);
  7. Большое количество готовых примеров с использованием данного плагина (http://coolcarousels.frebsite.nl/);
  8. Адаптивность, поддержка touch и scroll событий.

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

Хотите воспользоваться JQuery или Javascript слайдерами “карусель”? Перед вами лучшие из них

В веб-дизайне, использование двигающихся горизонтальных панелей, также известных как карусели и слайдеры, с целью показать топовый контент, стало одной из популярных тенденций последних лет. Это достаточно эффективный метод увеличения юзабилити сайта. Кроме того, таким образом можно легче привлечь внимание пользователей. А причина, по которой этот тренд так широко используется, главным образом заключается в том, что появились плагины для слайдеров-каруселей на JQuery.

Они позволяют пользователям легко получать визуальный доступ к нескольким единицам контента. Такие объекты, как HTML-контент, изображения, видео и т.п. можно прокручивать вперед и назад с или без анимированных переходов.

Многие веб-дизайнеры не любят данный подход, потому как он не всегда дает возможность эффективно презентовать контент, однако, если клиенты желают именно этого, то зачем же им отказывать?

Плагины, рассмотренные в данной статье, максимально упрощают процесс добавления слайдера или карусели на веб-сайт.

Плагины-карусели на JQuery с легкостью позволяют представить контент и картинки на сайте креативно и инновационно. Меж тем, данные плагины обладают разным функционалом. Они обычно имеют много функций и предполагают несколько разных опций для настройки. Таким образом, когда вы будете проектировать новый проект, обязательно рассмотрите возможность использования JQuery плагинов-каруселей.

Slick

Полностью адаптивный. Масштабирует с помощью своего контейнера. Отдельные настройки на точке останова. Доступно использование CSS3, если вам это нужно. Полностью функционален, если нет. Свайп может быть включен. Или выключен, тут уже на ваше усмотрение. Можно настроить перетаскивание объектов с помощью мышки, если сайт просматривается с компьютера. Доступно зацикливание. Слайдером можно будет управлять с помощью клавиш-стрелок. Вы можете добавить, удалить, установить фильтр для слайдов. Также можно пользоваться автозапуском , стрелками, колбэками и т.д.

Slider Pro

Slider Pro адаптивен по умолчанию. Не только изображения будут отлично масштабироваться, но и анимированные слои ( на которые вы можете добавлять любой контент) .

Cool carousels

Все карусели на этом сайте были созданы для вашего вдохновения, с использованием лишь библиотеки JQuery и jQuery.carouFredSel-plugin. Все они были протестированы для работы на FireFox и Chrome.

Carousel

Carousel использует простые HTML и CSS- карусели и дополняет их такими функциями как страницы списков, скроллинг, повторение, таймер, таймеры смещений, а также возможностью использовать как сенсор, так и клавиатуру. Применив базовый HTML паттерн и несколько базовых паттернов CSS, вы сможете создать неплохо функционирующую карусель, без необходимости обращения к JavaScript.

Microfiche.js

Библиотека каруселей, сделанная With Associates, ориентируется на производительность, простоту и возможность использования сенсоров.

Owl Carousel 2

JQuery плагин, с поддержкой управления с сенсорного экрана, позволяет создавать красивые и отзывчивый слайдеры- карусели.

FilmRoll

FilmRoll это очень легкий JQuery слайдер- карусель (сжатая версия весит 12 кб), который фокусируется на одном айтеме, располагая его по центру, вне зависимости от размеров других элементов карусели.

Client Testimonials Carousel

Сегодня мы делимся с вами отзывчивым и минималистическим окном с отзывами клиентов, которое можно легко интегрировать в ваш дизайн. Кроме того, мы рассматрели сценарий, при котором пользователь хочет просмотреть больше фидбэков, поэтому добавили кнопку перехода на отдельную страницу с отзывами, с помощью элегантной транзакции CSS3 .

ItemSlide.js — простой и красивый сенсорный слайдер-карусель.

CSS3 Perspective Carousel

Удивительный слайдер- карусель разработан на JQuery, с использованием «магии» CSS3.

Vimeo Carousel Gallery

Теперь можно показывать видео с Vimeo в виде шикарной галерии, с помощью JQuery. В отличие от Youtube, Vimeo не позволяет вам создавать собственные списки воспроизведения для отображения ваших видео. Поразмыслив над этой проблемой, я создал данный плагин, который переходя по URL-адресам видео с Vimeo, позволяет вам создать карусель с информацией, поступающей от Vimeo, и таким образом видео можно посмотреть прямо на странице вашего сайта.

Pickli

carousel-3d : плагин jQuery для создания 3D слайдеров-каруселей.

Простой 3D виджет-карусель. Он поддерживает все основные браузеры, включая IE8 и 9.Для того, чтобы получить полноценный 3D-эффект, необходимо использовать браузеры, поддерживающие 3D-трансформации CSS. Данный виджет работает не только с фотографиями, но и с любым HTML элементом.

Цукерберг рекомендует:  Работа которая нравится - Как понять, кем я действительно хочу быть в ИТ-сфере

jQuery Rondell

Плагин JQuery создан специально для отображения объектов в удобно настраиваемой карусели.

Flexisel – Адаптивный jQuery плагин для создания каруселей.

CarouselSS

CarouselSS, произносится как “Карусель Эс Эс”, JQuery плагин слайдеров-каруселей для HTML контента / изображений. Он использует CSS события переходов / анимации при переключении кадров, кроме того, он также использует состояния, основанные на классах CSS.

SwipeView

SwipeView это супер простое решение для создания бесшовных зацикленных каруселей для мобильных браузеров. Он обладает консервативной памятью, так как использует только три элемента в один и тот же промежуток времени, работает плавно, так как использует преимущества аппаратного ускорения, а пропускная способность плагина отлично взаимодействует с его 1.5kb уменьшенным или сжатым объемом.

jQuery карусель

Здравствуйте, уважаемые читатель блога LifeExample. Очень долго я не мог выделить время на подготовку материала и написание этой статьи, но теперь все готово и я рад представить вашему вниманию очередной плагин – «jQuery карусель от Lifeexample.ru«.

Идея написать плагин карусели, родилась одновременно с желанием сделать на блоге галерею постов. Почитав, что пишут люди, я понял, что без ротатора картинок тут не обойтись. В простонародье ротатор картинок чаще называют «Карусель картинок«, ну а поскольку в наше время необычайно популярны различного рода библиотеки и фреймворки, упрощающие реализацию фантазий разработчиков, сегодня мы будем самостоятельно создавать плагин для jquery — карусель. В будущем мы разовьем эту тему и применим jquery карусель при написании плагина галереи постов для wordpress.

Демо-версия плагина:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Начало создания jquery карусели (Шаг 1)

По сути своей плагинами мы называем методы объекта jQuery. Т.е. при создании нового плагина нам нужно создать новый метод объекта, что делается таким образом:

Это каркас любого плагина, и в нем мы определили метод Carousel . Теперь из исполняемого скрипта мы можем обратиться к этому методу привычным всем способом:

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

Во втором примере я использовал цепочку выполнения методов.

Не смотря на то, что наш выполнится успешно, он находится в зачаточном состоянии и поэтому последнее событие css(‘background’,’green’) вызванное после Carousel() , не сработает.

Для того чтобы полноценно использовать плагин стало возможным и в цепочках методов достаточно внести в его содержимое такой код:

Это заставит наш метод возвращать объект, для дальнейшей обработки, и использование последовательности методов станет доступным.

Обратите внимание, что мы при объявлении метода получаем параметр option , такой параметр нужен любому мало-мальски полезному плагину. В этом параметре будет передан объект с пользовательскими настройками.

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

Теперь можно обратиться к плагину таким образом

В результате метод $.extend(settings, options); заменит параметры по умолчанию определенные в объекте settings , пользовательскими. В случае не обнаружения пользовательских параметров в силу вступят определенные по умолчанию:

Как видите атрибут attr2 остался определенным по умолчанию.

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

Как реализовать jQuery карусель (шаг2)

В задачи карусели входит циклическая бесконечная прокрутка имеющихся элементов карусели. Элементами могут являться:

Карусель на jquery, должна уметь вращаться как с участием пользователя по нажатию на навигационные кнопку «Вперед» и «Назад» так и автоматически.

Ориентация карусели будет иметь два положения:

Ну и ни один ротатор картинок не обойдётся без настройки количества выводимых элементов, скорости прокрутки и количества прокручиваемых элементов.

Разобравшись с целями и задачами модно приступать к непосредственному созданию плагина карусель jQuery.

Делаем jQuery карусель своими руками

Все досконально я описывать не буду, поскольку по привычке снабдил код подробными комментариями, но все же основные два момента освещу.

Первое:

Карусель представляет собой каркас структуру из основного блока в который вложен маркированный список:

Также для осуществления навигации по элементам карусели можно добавить два любых HTML объекта:

Впоследствии нужно будет передать id этих объектов в параметры плагина, но об этом чуть позже.

Второе о чем хочу сказать это об алгоритме вращения, и о том, как он реализован.

Чтобы создавать эффект вращения, мы при нажатии на кнопки будем копировать элементы с одной стороны ленты в другую, затем сдвигать ленту по направлению движения, и после того как она зафиксируется, удалять ненужные скрывшиеся элементы.

Обратите внмание: элементы (li) нужно копировать, а не переносить, только так мы сможем добиться эффекта бесконечности.

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

*/
/* После чего можно указать параметры для использования */
/* плагина */
/* $(‘.container’).Carousel( < */
/* visible: 3, //количество отображаемых позиций 3 */
/* rotateBy: 1, //прокручивать по 1 */
/* speed: 1000, //скорость 1 секунда */
/* btnNext: null, // кнопка вперед не назначена */
/* btnPrev: null, // кнопка назад не назначена */
/* auto: true, // авто прокрутка включена */
/* margin: 10, // отступ между позициями */
/* position: «h»,// расположение по горизонтали */
/* dirAutoSlide: false //направление движения */
/* >); */
/* Или использовать параметры по умолчанию */
/* $(‘.container’).Carousel(); */
/* */
/********************************************************/
( function ( $ ) <
$. fn . Carousel = function ( options ) <
// Настройки по умолчанию
var settings = <
visible : 3 , //количество отображаемых позиций 3
rotateBy : 1 , //прокручивать по 1
speed : 1000 , //скорость 1 секунда
btnNext : null , // кнопка вперед не назначена
btnPrev : null , // кнопка назад не назначена
auto : true , // авто прокрутка включена
margin : 10 , // отступ между позициями
position : «h» , // расположение по горизонтали
dirAutoSl >: false //направление движения в перед для автопрокрутки
> ;

return this . each ( function ( ) <
if ( options ) <
$. extend ( settings , options ) ; //устанавливаем пользовательские настройки
>

// определяем переменные
var $this = $ ( this ) ; //родительский элемент (Блок в котором находится карусель)
var $carousel = $this. children ( ‘:first’ ) ; // получаем дочерний элемент (UL) т.е. саму карусель
var itemW >= $carousel. children ( ) . outerWidth ( ) + settings. margin ; // вычисляем ширину элемента
var itemHeight = $carousel. children ( ) . outerHeight ( ) + settings. margin ; // вычисляем высоту элемента
var itemsTotal = $carousel. children ( ) . length ; // получаем общее количество элементов в каруселе
var running = false ; //останавливаем процесс
var int >= null ; //отчищаем интервал
//size — размер для вычисления длины, зависит от ориентации карусели
var size = itemW >;
if ( settings. position == «v» ) size = itemHeight ;
//Если карусель вертикальная то
if ( settings. position == «v» )
$this. css ( <
‘position’ : ‘relative’ , // необходимо для нормального отображения в ИЕ6(7)
‘overflow’ : ‘hidden’ , // прячем все, что не влезает в контейнер
‘height’ : settings. visible * size + ‘px’ , // ДЛИНУ контейнера ставим равной ширине всех видимых элементов
‘width’ : itemW >- settings. margin //Ширина контейнера равна ширине элемента
> ) ;
else
$this. css ( <
‘position’ : ‘relative’ , // необходимо для нормального отображения в ИЕ6(7)
‘overflow’ : ‘hidden’ , // прячем все, что не влезает в контейнер
‘width’ : settings. visible * size + ‘px’ , // ширину контейнера ставим равной ширине всех видимых элементов
‘height’ : itemHeight — settings. margin
> ) ;
//вычисляем расстояние отупа от каждого элемента
if ( settings. position == «v» )
$carousel. children ( ‘li’ ) . css ( <
‘margin-top’ : settings. margin / 2 + ‘px’ ,
‘margin-bottom’ : settings. margin / 2 + ‘px’ ,
‘float’ : ‘left’ ,
‘width’ : ’60px’ ,
‘height’ : ’40px’ ,
‘padding’ : ‘5px’ ,
‘background’ : ‘#E2E2E2’ ,
‘font’ : ’20px Calibry italic’ ,
‘color’ : ‘green’ ,
‘border’ : ‘gray 1px solid’
> ) ;
else
$carousel. children ( ‘li’ ) . css ( <
‘margin-left’ : settings. margin / 2 + ‘px’ ,
‘margin-right’ : settings. margin / 2 + ‘px’ ,
> ) ;
// в зависимости от ориентации, увеличиваем длину или ширину карусели
if ( settings. position == «v» )
$carousel. css ( <
‘position’ : ‘relative’ , // разрешаем сдвиг по оси
‘height’ : 9999 + ‘px’ , // увеличиваем лену карусели
‘left’ : 0 ,
‘top’ : 0
> ) ;
else
$carousel. css ( <
‘position’ : ‘relative’ , // разрешаем сдвиг по оси
‘width’ : 9999 + ‘px’ , // увеличиваем лену карусели
‘top’ : 0 ,
‘left’ : 0
> ) ;
//прокрутка карусели в наравлении dir [true-вперед; false-назад]
function sl >( dir ) <
var direction = ! dir ? — 1 : 1 ; // устанавливаем заданное направление
var Indent = 0 ; // смещение (для ul)
if ( ! running ) <
// если анимация завершена (или еще не запущена)
running = true ; // ставим флажок, что анимация в процессе
if ( int >) < // если запущен интервал
window. clearInterval ( int >) ; // очищаем интервал
>
if ( ! dir ) < // если мы мотаем к следующему элементу (так по умолчанию)
/*
* вставляем после последнего элемента карусели
* клоны стольких элементов, сколько задано
* в параметре rotateBy (по умолчанию задан один элемент)
*/
$carousel. children ( ‘:last’ ) . after ( $carousel. children ( ) . slice ( 0 , settings. rotateBy ) . clone ( true ) ) ;
> else < // если мотаем к предыдущему элементу
/*
* вставляем перед первым элементом карусели
* клоны стольких элементов, сколько задано
* в параметре rotateBy (по умолчанию задан один элемент)
*/ $carousel. children ( ‘:first’ ) . before ( $carousel. children ( ) . slice ( itemsTotal — settings. rotateBy , itemsTotal ) . clone ( true ) ) ;
/*
* сдвигаем карусель (

    ) на ширину/высоту элемента,
    * умноженную на количество элементов, заданных
    * в параметре rotateBy (по умолчанию задан один элемент)
    */
    if ( settings. position == «v» )
    $carousel. css ( ‘top’ , — size * settings. rotateBy + ‘px’ ) ;
    else $carousel. css ( ‘left’ , — size * settings. rotateBy + ‘px’ ) ;
    >

/*
* расчитываем смещение
* текущее значение + ширина/высота одного элемента * количество проматываемых элементов * на направление перемещения (1 или -1)
*/
if ( settings. position == «v» )
Indent = parseInt ( $carousel. css ( ‘top’ ) ) + ( size * settings. rotateBy * direction ) ;
else
Indent = parseInt ( $carousel. css ( ‘left’ ) ) + ( size * settings. rotateBy * direction ) ;

if ( settings. position == «v» )
var animate_data = < 'top' : Indent >;
else
var animate_data = < 'left' : Indent >;
// запускаем анимацию
$carousel. animate ( animate_data , < queue : false , duration : settings. speed , complete : function ( ) <
// когда анимация закончена
if ( ! dir ) < // если мы мотаем к следующему элементу (так по умолчанию)
// удаляем столько первых элементов, сколько задано в rotateBy
$carousel. children ( ) . slice ( 0 , settings. rotateBy ) . remove ( ) ;
// устанавливаем сдвиг в ноль
if ( settings. position == «v» )
$carousel. css ( ‘top’ , 0 ) ;
else $carousel. css ( ‘left’ , 0 ) ;
> else < // если мотаем к предыдущему элементу
// удаляем столько последних элементов, сколько задано в rotateBy
$carousel. children ( ) . slice ( itemsTotal , itemsTotal + settings. rotateBy ) . remove ( ) ;
>
if ( settings. auto ) < // если карусель должна проматываться автоматически
// запускаем вызов функции через интервал времени (auto)
int >= window. setInterval ( function ( ) < sl >( settings. dirAutoSlide ) ; > , settings. auto ) ;
>
running = false ; // отмечаем, что анимация завершена
> > ) ;
>
return false ; // возвращаем false для того, чтобы не было перехода по ссылке
>
// назначаем обработчик на событие click для кнопки «вперед»
$ ( settings. btnNext ) . click ( function ( ) <
return sl >( false ) ;
> ) ;
// назначаем обработчик на событие click для кнопки «Назад»
$ ( settings. btnPrev ) . click ( function ( ) <
return sl >( true ) ;
> ) ;

if ( settings. auto ) < // если карусель должна проматываться автоматически
// запускаем вызов функции через временной интервал
int >= window. setInterval ( function ( ) < sl >( settings. dirAutoSlide ) ; > , settings. auto ) ;
>
> ) ;
> ;
> ) ( jQuery ) ;

Не забудьте создать необходимые для работы HTML элементы:

html xmlns = «http://www.w3.org/1999/xhtml» lang = «ru» >

head >
title > jQuery / title >
meta http-equiv = «content-type» content = «text/html;charset=utf-8» / >

style type = «text/css» >

.carousel <
margin: 0;
padding: 0;
list-style: none;
>

.carousel li <
float: left;
width: 60px;
height: 40px;
padding: 5px;
background: #E2E2E2;
font: 20px Calibry italic;
color:green;
border: gray 1px solid;
>
/ style >

script type = «text/javascript» src = «http://code.jquery.com/jquery-1.7.2.min.js» > / script >
script type = «text/javascript» src = «jquery.CarouselLifeExample.js» > / script >
script type = «text/javascript» >
$(document).ready(function() <
$(‘.container’).Carousel( <
visible: 3,
rotateBy: 1,
speed: 1000,
btnNext: ‘#next’,
btnPrev: ‘#prev’,
auto: false,
backslide: true,
margin: 10
>);

$(‘.container2’).Carousel( <
visible: 3,
rotateBy: 1,
speed: 1000,
btnNext: ‘#next2’,
btnPrev: ‘#prev2’,
position: «v»,
auto: false,
backslide: true,
margin: 10
>);

div class = «container» >
ul class = «carousel» >
li > 1 / li >
li > 2 / li >
li > 3 / li >
li > 4 / li >
li > 5 / li >
li > 6 / li >
/ ul >
/ div >
button id = «prev» > Назад / button >
button id = «next» > Вперед / button >
br / >
button id = «prev2» > / button >
div class = «container2» >
ul class = «carousel» >
li > 1 / li >
li > 2 / li >
li > 3 / li >
li > 4 / li >
li > 5 / li >
li > 6 / li >
/ ul >
/ div >
button id = «next2» > Вперед>> / button >

div id = «console» > / div >
/ body >
/ html >

Кому интересно, как плагин применить совместно с wordpress, и настроить все для вывода галереи постов, пишите в комментариях. Постараюсь в скором времени описать в отдельной статье о том, как сделать jquery карусель в галереи постов wordpress .

На этом предлагаю вам скачать исходники плагина с примером, и откланиваюсь.

Подборка каруселей для сайта

Достаточно часто встречаюсь с просьбой установить на сайт карусель, ну и конечно найти одну универсальную просто не реально. У каждого заказчика свои пожелания. Кому-то нужна горизонтальная, кому-то вертикальная, кому-то нужна зацикленная, кому-то с контентом и тд. И поэтому решил сделать небольшую подборку каруселей для сайта. Надеюсь тут вы найдете что-то и для себя.

1. Вертикальная карусель

Хорошая карусель с эффектными переходами. На сайте примера, под каруселью есть несколько вариантов перехода данной карусели (MORE EXAMPLES).

2. Простая навигация

Карусель с навигацией в виде точек и с использованием контента.

3. Карусель-слайдер

Интересная подача изображений в разбросанном виде и интересной сменой изображений.

4. Agile

Быстрая карусель в нескольких вариантах и видах.

5. Карусель изображений

Очень простой плагин, но с хорошими характеристиками. Внутри можно использовать изображения разной ширины.

6. jCarousel

Адаптивная карусель с приятным и легким дизайном. Инструкцию по установке и больше примеров можете найти на этом сайте.

7. Roundabout

Плавающие изображение в 3d карусели.

8. Roundabout — 2

Несколько вариантов плавающей карусель. В примере есть горизонтальная, вертикальная, диагональная и другие карусели.

9. jCarousel Lite

jCarousel с стандартными настройками. Все сделано очень просто и очень скромно.

10. Tiny Carousel

Универсальная, красива и очень красочная карусель для сайта.

11. CarouFredSel

Хорошая карусель, сам часто ее использую. Достаточно легкая в установке и с богатым функционалом.

12. jquery плагин карусели

Простая и удобная карусель.

13. Liquid Carousel

Адаптивна (резиновая) карусель. Хорошо подойдет для кино сайта, и не только.

14. jQuery Waterwheel

3d карусель с легкими и плавными переходами.

15. JQuery carousel plugin

Простенькая и в минималистическом стиле карусель.

16. Elastislide Responsive

Адаптивная карусель, которая выполнена в нескольких вариантах.

17. jsCarousel V 2.0.0

Красивая и универсальная карусель с возможностью вставки контента. Детальная инструкция по установке лежит ТУТ

50 полезных плагинов JQuery 2012 года

29 декабря 2012 | Опубликовано в Веб-дизайн | 12 Комментариев »

jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.

Page Layout плагины

equalize.js — это плагин для jQuery, который позволяет создавать блочную структуру сайта. Он позволяет выравнивать высоту и ширину любого элемента.

Новый плагин для адаптивных макетов.Freetile позволяет создавать элементы любого размера, при этом необходимость создания фиксированного размера столбцов сетки отпадает.

Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.

Zoomooz.js — это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.

Цукерберг рекомендует:  Генерируем файлы при помощи JavaScript

Wookmark — плагин для создания динамичного многоколоночного шаблона.

jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.

Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.

Плагин jQuery, который добавляет эффект реального переворачивания страниц при переходе между разделами. Используется аппаратное ускорение. Работает на планшетах и смартфонах.

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

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

Плагины для навигации

HorizontalNav — это jQuery плагин, который растягивает горизонтальное меню, чтобы она соответствовала всей ширине контейнера. Если Вы когда-либо пытались создать эффект правильной натяжки меню навигации на CSS контейнер у проекта, то Вы однозначно знаете насколько это тяжело сделать для кросс-браузерной совместимости. Данный плагин делает это с легкостью.

stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).

ddSlick — плагин, который позволяет создавать выпадающие меню с изображениями и описаниями.

Плагин для простой организации раскрывающихся панелей. Плагин поддерживает работу с куки для хранения состояния панелей. Среди опций есть возвратные функции для настройки процесса открывания и закрывания секций.

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

Формирующие плагины

Плагин позволяет определять уровень сложности пароля.

JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.

Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.

Плагин для фильтрации данных. Вы можете фильтровать данные по тегу и по нескольких тегам и категориям.

Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п. ).

Плагины для создания слайдеров и каруселей

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

iosSlider

iosSlider — плагин для адаптивного кроссбраузерного слайдера.

RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.

Fresco — адаптивный лайтбокс-плагин. Он может использоваться, чтобы создать ошеломляющие оверлейные программы, которые отлично работают на любых размерах экрана, во всех браузерах, на всех устройствах.

BookBlock — jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.

Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.

Rhinoslider — довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру.

Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.

Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.

Плагины для диаграмм и графиков

Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.

JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.

Плагины для типографики

Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.

Textualizer — jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.

trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.

Плагины для создание различных эффектов для изображений

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

Плагин позволяет странице изменять src-атрибуты изображений в соответствии с шириной контейнера, а PHP-файл автоматически создает новые/измененные в размере изображения. Изображения создаются только тогда, когда они запрашиваются в первый раз, и этот процесс не будет повторяться при последующих запросах, что положительно сказывается на производительности.

Backstretch — простой плагин, который позволяет добавлять фоновое изображение изображение на любую страницу.

И другие.

Плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Noty — это jQuery плагин, с помощью которого без особых проблем и сложностей можно легко на своем сайте или блоге создать уведомления типа: information, error, alert, success, warning, или просто заменить стандартные уведомления на сайте, при регистрации например. Абсолютно каждое уведомление можно настроить, чтобы оно выводилось поочередно.

JQuery-плагин позволяет легко помещать маркеры на карте сайта с помощью Google Map API V3.

Плагин, который позволяет легко добавлять интерактивные карты на вашем сайте. Вы получите мощную API карту, настраиваемые маркеры и обработчик-событий.

Jплагин, который использует Scalable Vector Graphics (SVG) для рендера векторных карт. Он работает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML.

Простой в использовании JQuery плагин для социальных виджетов сетей. В настоящее время он поддерживает Facebook, Twitter и Google+.

Tooltipster представляет собой легкий и простой в стиле JQuery плагин, который поможет вам легко создавать всплывающие подсказки.

BigVideo.js — jQuery плагин, который упрощает адаптирование фонового видео на веб-страницу. Вы можете использовать одно или несколько видео или использовать плагин в качестве проигрывателя, с отображением плей-листа.

С помощью плагина calendario вы сможете для своего сайта организовать замечательный календарь, в котором будут отмечаться все вам важные материалы и праздники, которые можно с легкостью задать самостоятельно.

Топ плагинов jQuery. Фоновый слайдер

Дата публикации: 2020-03-09

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с еще одним jquery плагином, реализующим полноэкранный фоновый слайдер jQuery фоновых изображений.

Как уже отмечалось в одной из предыдущих статей, такой плагин будет особо полезен имиджевым сайтам, где часто требуется эффект «вау». Ну а адаптивность jQuery слайдера из коробки — это еще один плюс плагина и еще одно «за» в его пользу при выборе из аналогичных решений.

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

All the Free jQuery Plugins about ‘Carousel’ are listed here.

Blueimp Gallery is a powerful and multi-functional jQuery/Vanilla JavaScript plugin for creating responsive, touch-friendly and fully configurable image/video gallery, carousel slider and lightbox gallery on the page.

jQuery OWL Carousel 2 helps you create a highly customizable, fully responsive, mobile touch-friendly content carousel/slider with lots of useful functionalities for modern web/mobile designs.

Responsive Sl > 09/20/2020 — Slider — 18818 Views

Glide.js is a lightweight, flexible ES6 JavaScript slider/carousel library that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.

responsiveCarousel is a lightweight (

5.4kb minified), responsive and touch-friendly jQuery plugin that helps you simply to create multiple Carousel like galleries which accept any type of html elements.

Responsive and Flexible Mobile Touch Sl > 07/27/2020 — Slider — 153059 Views

Swiper is a powerful javascript library to implement responsive, accessible, flexible, touch-enabled carouses/sliders on your mobile websites and apps.

Responsive jQuery Content Sl > 06/07/2020 — Slider — 13467 Views

Liquid Slider is a jQuery Slider Plugin that allows you to create a fully responsive, touch-friendly content slider for both web and mobile devices.

Slick is a fresh new jQuery plugin for creating fully customizable, responsive and mobile friendly carousels/sliders that work with any html elements.

Flexible and Simple Image Sl > 11/19/2020 — Slider — 15767 Views

Bare Bones Slider is a lightweight and flexible jQuery Slider plugin that enables you to quickly create highly customizable image slider with lots of pre-coded options.

jcarousel is a simple and fast jQuery carousel slideshow plugin for controlling a list of items in horizontal or vertical order.

Mobile-compatible Sl > 07/19/2020 — Slideshow — 14298 Views

Camera is a powerful, configurable, responsive, mobile-friendly jQuery slideshow/slider/carousel plugin that comes with fancy slice transition effects between slides.

Simple jQuery Sl > 06/28/2020 — Slider — 17905 Views

Impulse Slider is a simple jQuery plugin that takes advantage of jQuery and CSS3 transforms / transitions to create a slider with 3D image flip effects.

Responsive jQuery Content Sl > 05/01/2020 — Slider — 69491 Views

bxslider is a fully responsive jQuery Slider Plugin that allows you to create a content slider which can contain images, video, or HTML content.

A jquery Slideshow Plugin for responsive carousels that work with mouse, touch, and keyboard.

A simple and easy-to-use jQuery plugin that helps you create a slider widget on your web page for showcasing your photos in a Waterwheel Carousel interface.

Responsive Full-W > 02/26/2020 — Slider — 61823 Views

jQuery skdslider is a lightweight and easy-to-use jQuery plugin that allows you to create a responsive and full-width image slider with auto-play, dots/number navigation and fade animation support.

Responsive & Touch-Friendly jQuery Sl > 02/20/2020 — Slider — 12287 Views

Yet another jQuery slider/slideshow plugin that has the ability to slide any html elements in a responsive & touch-friendly layout.

Cloud 9 Carousel is a cool jQuery & Html5 based carousel plugin that has the ability to continuously rotate/slide a set of images with the familiar 3D ‘cover flow’ effect.

flexisel is a simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.

Clean & Simple Image Sl > 05/16/2020 — Slider — 12397 Views

Coin Slider is a jQuery Slider plugin that allows you to create a Clean & Simple Image Slider with unique transition effects. It features Auto slide, Navigation box and Linking images.

Responsive & Flexible jQuery Multi-sl > 12/15/2020 — Slider — 16088 Views

miSlider is a responsive, flexible and customizable jQuery & HTML5 slider plugin that displays as many slides of content as possible on your screen and enlarges the current slide with next/prev navigation.

Lightweight Responsive Content Sl > 10/25/2020 — Slider — 57199 Views

lightslider is a lightweight yet fully customizable jQuery slider plugin that supports any Html contents and makes use of CSS3 transitions and transforms to create smooth ‘fade’ or ‘slide’ effects.

ResponsiveSl > 08/06/2020 — Slider — 10163 Views

ResponsiveSlides is a Simple & Lightweight Responsive Slider Plugin (1kb minified and gzipped) written in jQuery.

skidder is a jQuery slider plugin for creating a responsive, mobile-friendly image carousel that features auto image scaling to fit mobile & desktop browsers.

Carousel3d is a jQuery & jQuery UI carousel plugin that makes use of CSS3 transforms and perspectives to cycle through a set of Html elements with an amazing 3D rotating effect.

Image Carousel Lightbox is a simple jQuery plugin for displaying an image gallery slider in a popup lightbox window.

Lightweight & Responsive jQuery Sl > 03/04/2020 — Slider — 20685 Views

Simple Slideshow is a small jQuery slider plugin for creating full responsive, touch-friendly and fast content slider/slideshow on your website.

FilmRoll is a jQuery slider plugin for creating a responsive carousel that has the ability to center the selected item on the page, especially when all of the items had varying widths.

lbSlider is a ultra-light (

4kb un-minified) jQuery plugin for creating a infinite slider that rotates items in a carousel-like interface.

Scrollbox is a lightweight plugin for jQuery that enables you to scroll a list of html elements (text, image, etc. ) like a carousel slider or traditional marquee.

Responsive jQuery Endless Scrolling Image Sl > 10/26/2015 — Slider — 6997 Views

loopit is a jQuery responsive slider/carousel plugin that allows to vertically or horizontally slide a group of images with infinite loop, image captions and easing effects support.

A lightweight, responsive jQuery slideshow plugin that creates a full page image slider/carousel with CSS3 transitions and infinite loop support. More features: Keeps images have the same height. Auto center the images as you resize the win

Sequence — Responsive Sl > 08/28/2015 — Slider — 2904 Views

Sequence is a modern slider plugin built with Jquery and CSS3.

microfiche.js is a easy-to-use and touch-friendly jquery Carousel Plugin that helps you to quickly create a performant carousel-like slideshow with smooth sliding effect.

Tiny Circleslider is a lightweight and touch-enabled jQuery plugin for creating a circular carousel slider that allows you to rotate a group of images on scroll.

Flickerplate is a jQuery plugin for creating a trendy fashion carousel/slider which allows you cycle through images with animated arrows and dots navigation.

Tikslus Carousel is a fully responsive and mobile-friendly jQuery plugin for creating an image carousel with amazing CSS3 animations.

Carousel is a feature rich yet easy-to-use jQuery plugin for creating a responsive and touch-friendly carousel slider just by calling carousel() function on an unordered list.

Responsive, Touch-enabled and Fullscreen Image Sl > 01/13/2015 — Slider — 5714 Views

slideLp is a full-featured jQuery image carousel/slider plugin that is responsive and touch-friendly and comes with lots of optional settings for customization.

jqcarousel is a jQuery plugin for creating a ‘cover flow’ like image gallery with infinite rotation support.

RadiantScroller is a jQuery responsive slider (carousel) plugin which allows to slide through grid and simple horizontal layouts.

A really simple and lightweight jQuery carousel plugin that provides the basic functionalities of a carousel slider like infinite loop scroll, arrows navigation, CSS3 based slide transitions, and more.

Basic jQuery Any Content Sl > 08/18/2014 — Slideshow — 2365 Views

Carousel 2.0 is a super tiny and easy jQuery slideshow plugin which enables you to horizontally or vertically slide through a group of Html contents.

Touch Enabled Sl > 06/18/2014 — Slider — 7280 Views

iosSlider is a jQuery Slider Plugin for creating Touch Enabled, customizable, cross-browser content slider, which can be used as a content slider, carousel, scrolling website banner, or image gallery.

Hover Carousel is a cool jQuery carousel plugin which allows you to horizontally scroll through a gallery of images by mouse moving.

Just another simple lightweight jQuery plugin that loops through a gallery of images (or any other Html elements) in a fully responsive slider/carousel interface.

jQueryGallery is a lightweight jQuery plugin which allows you to create a fully responsive & full page image gallery with a thumbnail carousel.

Basic jQuery Content Sl > 05/15/2014 — Slider — 2359 Views

Simple Slider is an ultra-lightweight jQuery plugin that allows you to slide through a series of Html contents like a carousel that supports auto play and infinite loop.

OWL Carousel is a clean and neat jQuery slider plugin for creating fully responsive and touch-enabled carousel slider with a lot of options.

Yet another jQuery plugin that provides a simple way to create an image carousel with support of auto play, infinite looping, multiple items in one slide, arrows navigation and more.

rotataDiz is a simple lightweight jQuery carousel plugin that allows you to rotate a set of images with CSS3 transitions and transforms.

A simplest jQuery image carousel/slider plugin that cycles through a group of image with a basic slide animation.

Lightweight jQuery Content Sl > 05/02/2014 — Slider — 2104 Views

Just another very lightweight jQuery plugin for creating a horizontal Html content carousel slider with lots of cool slide animations.

Flip Carousel is a responsive jQuery carousel plugin that has the ability to flip carousel content like a card using CSS3 transitions, transforms, and perspectives.

jQuery Image Sl > 04/19/2014 — Slider — 2815 Views

A jQuery, Html5, CSS3 based image carousel/slider that has the ability to dynamically change the background/text color of the image caption and navigation according to the dominant color of an image.

Responsive & Scalable jQuery Sl > 04/18/2014 — Slider — 7471 Views

Skate is a responsive, touch-enabled, flexible jQuery slider plugin for creating an image slideshow/carousel/rotator with ease.

Chechu Carousel is a lightweight and simple jQuery/Zepto plugin for creating a carousel/slider that allows to cycle through Html contents with smooth sliding effects.

maxcarousel is a tiny yet mobile-friendly jQuery carousel plugin that allows to slide/loop any html content infinitely.

Moodular is a responsive carousel / slider plugin built on top of jQuery and Boostrap 3 that comes with 2 modules (controls & effects) in order to create your own styles.

JQM-Carousel is a jQuery & jQuery mobile plugin for building a simple clean, mobile-first image carousel for your mobile web app.

AdaptaSlider is a jQuery plugin that makes it easier to create a responsive content slider/carousel which is highly customzable via javascript and custom CSS to suit your any needs.

Just another lightweight jQuery & HTML5 based slider plugin to create a fancy responsive image carousel with fade effects and arrows/dots navigation.

Fader is a simple and lightweight jQuery plugin for creating an image carousel that features auto play, infinite loop and adjustable fade animation.

rcarousel is a highly customizable and multi-functional carousel/slider plugin driven by jQuery and jQuery UI. It supports any HTML element in slides.

Open Carousel is a simple and easy-to-use jQuery Carousel plugin that gives visitors easy and visible access to several content items.

Simple Fashion jQuery Image Sl > 03/14/2014 — Slider — 3756 Views

A minimalist jQuery plugin for creating a fashion image slider/slideshow/carousel with arrows navigation and pagination support.

humbleSlider is a responsive, customizable, touch-friendly jQuery image carousel slider plugin that features keyboard/swipe/arrows navigation, infinite loop, CSS3 transition support and much more.

CSS Slider is jQuery carousel/slider plugin which takes advantage of CSS3 transitions and transforms to animate the slides with next/prev controls and infinite looping support.

Ublue is a simple clean yet highly configurable jQuery plugin for creating horizontal & vertical image carousel / sliders that supports autoplay, infinite loop, pager/button navigation, thumbnails and more.

kGallery is an easy-to-use jQuery plugin that enables you to create a clean photo gallery with thumbnails preview and some controls.

Just another jQuery slider plugin to create an infinite loop carousel that allows to slide any html elements and works perfectly with mobile & desktop.

Responsive Infinite Loop Sl > 01/19/2014 — Slider — 17038 Views

Yet another lightweight jQuery slider plugin for creating a responsive carousel with infinite loop support.

Flexible and Customizable jQuery Image Sl > 01/13/2014 — Slider — 2587 Views

BeaverSlider is a jQuery plugin which enables you to create flexible and customizable jQuery image sliders with more than 29+ effect types.

Customizable jQuery Sl > 01/10/2014 — Slideshow — 2753 Views

sliders.js is a powerful jQuery slider resolution to create slideshow/carousel with lots of options/methods to customize.

slippity is a fresh new and lightweight jQuery plugin for creating a responsive content slider with infinite loop support and arrows & dots navigation.

lightYear is a really simple jQuery slider plugin for creating a circular content carousel that supports infinite sliding with easing effects.

WaltzerJS is a lightweight and fast jQuery slider plugin used to create a highly customizable carousel slider with lots of configurable options.

Featured Content Carousel is a fast and lightweight jQuery plugin for creating an Carousel Slider with easing and mouse wheel support to present the featured content of your website.

Simple and Multi-Functional jQuery Sl > 11/28/2013 — Slider — 3400 Views

ulslide is a simple but powerful jQuery plugin that helps you to create Multi-Functional sliders with vertical/horizontal sliding, fade, carousel, html5 rotation, and html5 scale effects.

Tiny Carousel is a lightweight and easy customizable jQuery carousel plugin to horizontally or vertically slide sets of html elements with some useful options.

Versatile and Responsive jQuery Sl > 08/12/2013 — Text — 1498 Views

RTP Slider is a flexible and touch-enabled jQuery plugin for creating versatile and responsive sliders with lots of config options on your website.

Image Scale Carousel is a neat jQuery slider plugin that create a image scale carousel slider on your website.

Minimal jQuery Liqu > 08/04/2013 — Slider — 5522 Views

Liquid Carousel is a lightweight jQuery slider plugin for creating a responsive & liquid styled image carousel slider with one line javascript.

rondell is a jQuery plugin for allows you to display images and other content in a nice way.

dbpasCarousel is yet another simple jQuery plugin that turns an unordered list into a infinite carousel which supports any html elements like text, image, etc.

jQuery Instagram Photos Sl > 06/30/2013 — Slider — 6425 Views

InstaSlider is a simple jQuery plugin that fetches Instagram Photos from an Instagram user or a hashtag and displays these photos in a carousel slider on your website.

RS Carousel is a jQuery plugin built with jQuery library and jQuery UI that makes it easy to create responsive and touch-enabled carousel slider using HTML markup.

Roundabout is a lightweight and touch-friendly jQuery plugin for creating clean and responsive Image Carousel Sliders on your website.

jQuery Carousel is a simple yet powerful jQuery plugin for creating a content carousel slider on your web page, which supports page lists, vertical & horizontal scrolling, class-toggling, timers, timer offsets as well as touch and keyboard e

Sl > 06/13/2013 — Slideshow — 3778 Views

SlidesJS is a Simple and Useful Slideshow Plugin built with Jquery for helping web designers create elegant and user-friendly slideshows.

simple Slider is a simple, lightweight and expandable jQuery carousel slider plugin with several options, which supports all the html elements like text, image, etc.

Looper.js is an easy-to-use jQuery plugin that make it easier to cycle through your content in many different styles.

flexisel is a simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.

flexisel is a simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.

flexisel is a simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.

Circular & Responsive Sl > 04/10/2013 — Slideshow — 13295 Views

carouFredSel is a Circular & Responsive Slideshow Plugin built with jQuery that can scroll any HTML element, one or multiple items simultaneously, horizontal or vertical, automatically.

monteserinGallery is a simple jQuery Slideshow plugin that allows you to create a carousel like image slideshow with animated transition effect.

Cycle.js is a lightweight jquery plugin that make it easier to create a variety of carousel sliders with CSS3 transition effects.

microfiche is a simple and touch-enabled plugin based on jQuery that allows you to create a Carousel Slidershow for your projects.

Automatic Infinite Carousel built with jQuery that automatically loops round by itsel as well as automatic scrolling.

JCoverflip Image Sl > 11/13/2012 — Slider — 6206 Views

jCoverflip is a jQuery widget that allows website administrators to present featured website content in a visually appealing manner.

Простая карусель на JQuery для любого сайта с автопрокруткой и подписями

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

Сразу оговорюсь о функционале — карусель с автопрокруткой, которую можно отключать или менять время самой прокрутки! Карусель может пролистывать фотографии только при нажатии стрелок вперед/назад. Многим веб мастерам нужна именно такая карусель. При большом желании ее можно легко доработать до автопрокрутки (по просьбам трудящихся уже сделал), например, используя периодический таймер в Java Script и зациклив действие на функции changeSlideMix().

Данная карусель работает на JQuery с небольшим скриптом. При клике на стрелку вперед или назад прокручивает строго по одной фотографии. Когда доходит до последней фото, то как бы перебрасывает первую в конец. Таким образом, получается красивая, как бы бесконечная прокрутка в карусели.

Особенность карусели еще в том, что она является адаптивной — как бы вы не уменьшали экран — она подстраивается под него (если ваши css стили не будут конфликтовать). Также можно установить несколько таких каруселей на сайте (но только без автопрокрутки (иначе меняйте селекторы в коде и каруселях)) — просто продублировав html код.

Некоторые особенности:
— Чтобы отключить автопрокрутку удалите или закомментируйте строку 20 в index.html.
— Чтобы изменить время прокрутки карусели в этой же строке поменяйте 2000 на свое число, где 1000 это 1 сек.
— Чтобы прокрутка шла слева направо поменяйте в 20 строке .slider-nextmix на .slider-prevmix
— Ширина самих блоков картинок сейчас 175px — меняется в ul.sm-slider li
— Обратите внимание на высоту карусели (.horizontal-slidermix) — сейчас 190px. При редактировании стилей, это может вам понадобится

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих