Как сделать слайдер 100 ширины html. Собственный слайдер изображений на jQuery. Простой JQuery слайдер с технической документацией

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

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

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

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

JQuery-слайдеры изображений

Jssor Responsive Slider

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

Адаптивный дизайн;
Более 15 параметров настройки;
Более 15 эффектов смены изображения;
Галерея изображений, карусели, поддержка полноэкранного размера;
Вертикальный ротатор баннеров, список слайдов;
Поддержка видео.

Демо | Скачать

PgwSlider — адаптивный слайдер на основе JQuery / Zepto

Единственной задачей данного плагина является демонстрация слайдов изображений. Он очень компактный, так как размер JQuery-файлов составляет всего 2,5 КБ, что позволяет подгружать его действительно быстро:

Адаптивный макет;
SEO-оптимизация;
Поддержка разными браузерами;
Простые переходы изображений;
Размер архива всего 2,5 КБ.

Демо | Скачать

Jquery Vertical News Slider

Гибкий и полезный JQuery -слайдер, предназначенный для новостных ресурсов с перечнем публикаций с левой стороны и выводом изображения справа:

Адаптивный дизайн;
Вертикальная колонка переключения новостей;
Расширенные заголовки.

Демо | Скачать

Wallop Slider

Этот слайдер не содержит JQuery , но я хотел бы представить его, так как он очень компактный и позволяет существенно уменьшить время загрузки страниц. Дайте мне знать, если он вам понравится:

Адаптивный макет;
Простой дизайн;
Различные варианты смены слайдов;
Минимальный код JavaScript ;
Размер всего 3KБ.

Демо | Скачать

Flat-style Polaroid gallery

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

Адаптивный слайдер;
Плоский дизайн;
Случайная смена слайдов;
Полный доступ к исходному коду.

Демо | Скачать

A-Slider

Демо | Скачать

HiSlider – HTML5, jQuery и WordPress слайдер изображений

HiSlider представил новый бесплатный плагин JQuery-слайдера , с помощью которого можно создавать разнообразные галереи изображений с фантастическим переходами:

Адаптивный слайдер;
Не требует знания программирования;
Несколько удивительных шаблонов и скинов;
Красивые эффекты переходов;
Поддержка разных платформ;
Совместимость с WordPress, Joomla, Drupal;
Возможность отображения контента разных типов: изображений, видео YouTube и видео Vimeo;
Гибкая настройка;
Полезные дополнительные функции;
Неограниченный объем отображаемого контента.

Демо |Скачать

Wow Slider

WOW Slider — это адаптивный JQuery-слайдер изображений с удивительными визуальными эффектами (домино, поворот, размытие, переворот и вспышка, вылет, жалюзи ) и профессиональными шаблонами.

WOW Slider поставляется вместе с мастером установки, что позволяет создавать фантастические слайдеры за считанные секунды без необходимости разбираться в коде и редактировать изображения. Также доступны для скачивания версии плагина под Joomla и WordPress :

Полностью адаптивный;
Поддержка всех браузеров и всех типов устройств;
Поддержка сенсорных устройств;
Простая установка на WordPress ;
Гибкость в настройке;
SEO -оптимизированный.

Демо |Скачать

Nivo Slider – бесплатный jQuery-плагин

Nivo Slider известен всему миру как самый красивый и простой в использовании слайдер изображений. Плагин Nivo Slider является бесплатным и выпускается по лицензии MIT :

Требуется JQuery 1.7 и выше;
Красивые эффекты перехода;
Простой и гибкий в настройке;
Компактный и адаптивный;
Открытый код;
Мощный и простой;
Несколько различных шаблонов;
Автоматическая обрезка изображения.

Демо |Скачать

Простой JQuery слайдер с технической документацией

Идея была навеяна слайдерами от Apple , в которых несколько маленьких элементов могут вылетать с различными эффектами анимации. Разработчики попытались воплотить эту концепцию с учетом минимальных требований для создания простого дизайна интернет-магазина, в котором «вылетающие » элементы представляют собой различные категории:

Адаптивный макет;
Минималистичный дизайн;
Различные эффекты выпадения и смены слайдов.

Демо |Скачать

Полноразмерный JQuery-слайдер изображений

Очень простой слайдер, занимающий 100% ширины страницы и подстраивающийся под размеры экранов мобильных устройств. Он работает с CSS переходами, а изображения «укладываются» вместе с анкорами. Анкор может быть заменен или удален, если вы не хотите привязывать к изображению ссылку.

При установке слайдер разворачивается на 100% ширины экрана. Также он может автоматически уменьшает размер изображений слайдов:

Адаптивный JQuery -слайдер;
Полноразмерный;
Минималистичный дизайн.

Демо |Скачать

Elastic Content Slider + пособие

Elastic Content Slider автоматически регулирует ширину и высоту в зависимости от размеров родительского элемента. Это простой JQuery-слайдер . Он состоит из слайд-зоны вверху, и панели навигационных вкладок в нижней части. Слайдер подстраивает свою ширину и высоту в соответствии с размерами родительского контейнера.

При просмотре на маленьких по диагонали экранах вкладки навигации превращаются в маленькие иконки:

Адаптивный дизайн;
Прокрутка кликом мыши.

Демо |Скачать

Free 3D Stack Slider

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

Адаптивный дизайн;
Flip -переход;
3D -эффекты.

Демо |Скачать

Fullscreen Slit Slider на основе JQuery и CSS3 + руководство

Из руководства вы узнаете, как создать слайдер с изюминкой: идея заключается в том, чтобы «разрезать » и вывести в таком виде текущий слайд, в то время, когда вы открываете следующее или предыдущее изображение. Используя JQuery и CSS -анимацию, мы можем создавать уникальные эффекты переходов:

Адаптивный дизайн;
Сплит-переход;
Полноэкранный слайдер.

Демо |Скачать

Unislider – очень маленький JQuery-слайдер

Никаких ненужных наворотов и разметки, размер менее 3КБ. Используйте любой HTML-код для своих слайдов, расширяйте его с помощью CSS . Все, что связано с Unslider , размещается на GitHub :

Поддержка различными браузерами;
Поддержка клавиатуры;
Регулировка по высоте;
Адаптивный дизайн;
Поддержка сенсорного ввода.

Демо | Скачать

Minimal Responsive Slides

Простой и компактный плагин (размер всего 1 Кб ), который создает адаптивный слайдер, используя элементы внутри контейнера. ResponsiveSLides.js работает с большим количеством браузеров, включая все версии IE от IE6 и выше:

Полностью адаптивный;
Размер 1 КБ;
CSS3 переходы с возможностью запуска через JavaScript ;
Простая разметка с использованием маркированного списка;
Возможность настройки эффектов переходов и длительности просмотра одного слайда;
Поддерживает возможность создания нескольких слайд-шоу;
Автоматическая и ручная прокрутка.

Демо |Скачать

Camera — бесплатный JQuery слайдер

Camera — плагин с множеством эффектов переходов, адаптивным макетом. Прост в настройке, поддерживается мобильными устройствами:

Полностью адаптивный дизайн;
Подписи;
Возможность добавления видео;
33 различных цвета иконок.

Демо |Качать

SlidesJS, адаптивный JQuery плагин

SlidesJS — это адаптивный плагин для JQuery (1.7.1 и выше ) с поддержкой сенсорных устройств и CSS3-переходов . Поэкспериментируйте с ним, попробуйте несколько готовых примеров, которые помогут вам разобраться, как добавить SlidesJS в свой проект:

Адаптивный дизайн;
CSS3 -переходы;
Поддержка сенсорных устройств;
Прост в настройке.

Демо | Скачать

BX Jquery Slider

Это бесплатный адаптивный JQuery слайдер:

Полностью адаптивный — подстраивается под любое устройство;
Горизонтальная, вертикальная смена слайдов;
Слайды могут содержать изображения, видео или HTML -контент;
Расширенная поддержка сенсорных устройств;
Использование CSS -переходов для слайд-анимации (аппаратное ускорение );
API обратных вызовов и полностью публичные методы;
Небольшой размер файла;
Прост в реализации.

Демо |Скачать

FlexSlider 2

Лучший адаптивный слайдер. Новая версия была доработана с целью увеличения скорости работы, компактности.

Демо | Скачать

Galleria — адаптивная фотогалерея на основе JavaScript

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

Полностью бесплатный;
Режим полноэкранного просмотра;
100% адаптивный;
Не требуется опыта программирования;
Поддержка iPhone , IPad и других сенсорных устройств;
Flickr , Vimeo , YouTube и многое другое;
Несколько тем.

Демо | Скачать

Blueberry — простой адаптивный JQuery-слайдер изображений

Представляю вам JQuery-слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry — это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами:

Минимальный дизайн;
Адаптивный макет;
Презентации.

Демо | Скачать

JQuery Popeye 2.1

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

Адаптивный дизайн;
Поддержка подписей;
Режим слайд-шоу.

Демо | Скачать

В данном уроке мы создадим простую адаптивную страницу с заголовком, украшенным каруселью, в которой изображения проскальзывают справа налево. Наше решение не использует JavaScript, слайдшоу основано на анимациях CSS3, которые поддерживаются в большинстве современных браузеров: Firefoх 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ и IE10.

Шаг 1 - Подготовительный

Нам потребуется 4 больших изображения (в нашем примере используется размер 1200px x 390px). Для горизонтального слайдера мы подготовим картинку размером 4800px x 390px в Photoshop, все наши изображения разместим одно за другим по горизонтали и сохраним результат в пригодном для веб пространства формате (“slider-horizontal.jpg ”).

Шаг 2 - HTML

В действительности мы будем анимировать свойство background-position для нашего заголовка. Сам заголовок имеет очень простую разметку:

L"ile de Batz

Полный код страницы выглядит следующим образом:

L"ile de Batz

Once upon a time…

Aenean lacinia bibendum ...

Links to learn by heart..

Bar & restaurants

Шаг 3. CSS для мобильных устройств

Мы начнем определять стили для мобильных устройств. Зададим основу дизайна, а затем добавим расширения шаблона для больших экранов. В тексте урока приводятся только основные свойства, полный код можно посмотреть в исходниках:

Body { width: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: #504331 } header { text-align: center; position: relative; } h1 { font-size: 2.75em; background: white; display: inline-block; padding: 0 10px; margin-bottom: .25em; } h1:after { content: ""; height: 2px; display: block; position: absolute; left: 0; right: 0; top: .5em; z-index: -1; border-top: 1px solid #504331; border-bottom: 1px solid #504331; } .links { background: url(../images/map.png) bottom center no-repeat; padding-bottom: 177px; }

Шаг 4. Стили для больших экранов

На больших экранах секции .main и .screen должны отображаться по другому. Секция .link будет иметь ширину 300px и позиционироваться как правая боковая панель, а секция .main останется слева. Также добавим двойную линию для разделения секций. Определять ширину экрана больше 1024px будем с помощью запроса @media:

@media only screen and (min-width: 1024px) { .content { position: relative; } .main { margin-right: 320px; padding: .5em 20px .5em 0; /*add a double line */ border-right: 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; } .links { position: absolute; right: 0; top: 0; width: 300px; text-align: right; } }

Шаг 5. Адаптивные изображения в заголовке

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

Header { background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; }

С помощью двух значений, выраженных в процентах (400% для свойства background-size и 32.5% для нижнего отступа) фон заголовка будет выводиться корректно вне зависимости от размера экрана.

Почему 400% ? У нас есть 4 слайда, поэтому выводиться будет 1/4 от фонового изображения в заголовке. То есть, размер фона должен быть в 4 раза шире чем заголовок.

Почему 32.5%? Мы позиционируем наш фон внизу заголовка. Высота фонового изображения 390px, ширина отдельного слайда 1200px, 390/1200 = 0.325, то есть высота составляет 32.5% ширины.

Шаг 6. Анимация

Мы будем анимировать свойство background-position . Чтобы выводилось второе изображение свойство background-position должно иметь значение 33.33333% bottom , третье - 66.66667% bottom , а четвертое - 100% bottom . Первое изображение выводится при значении свойства background-position равном 0 bottom или 133.33333% bottom (мы устанавливаем для повторений значение repeat-x ).

Каждое изображение имеет 25% от времени "славы". Первое выводится от 0 до 25%, второе - от 25% до 50%, третье - от 50% до 75%, а последнее - от 75% до 100%. Мы устанавливаем переходы так, чтобы изображение начинало выскальзывать немного раньше (используем значение 5%) прежде, чем истекут 25% его времени вывода. Вот так выглядит @keyframes :

@keyframes h_slide { 0% { background-position: 0% bottom; } 20% { background-position: 0% bottom; } 25% { background-position: 33.33333% bottom; } 45% { background-position: 33.33333% bottom; } 50% { background-position: 66.66667% bottom; } 70% { background-position: 66.66667% bottom; } 75% { background-position: 100% bottom; } 95% { background-position: 100% bottom; } 100% { background-position: 133.33% bottom; } }

Обратите внимание, что нужно добавить префиксы браузеров: @-webkit-keyframes (для Chrome, Safari, iOS Safari, Android) и @-moz-keyframes (для Firefox 15).

Ниже приводится полный код заголовка. Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out , так что каждый слайд замедляется в конце перехода.

Header { text-align: center; position: relative; background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; -webkit-animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite; }

Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов и особенно большой популярностью пользуется адаптивный дизайн. В связи с этим адаптивные слайдеры для сайта стали очень популярные и актуальные. Появилось не мало новых адаптивных jquery слайдеров , галерей и каруселей.

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

Слайдеры для сайта

1. Responsive Horizontal Posts Slider

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

2. Слайдер на Glide.js

Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.

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

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

Слайдер с эффектом морфинга. В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox — jQuery 3D image slider (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

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

Слайдеры для сайта вторая часть.

11. Flexslider

Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.

12. Фоторама

Fotorama — это универсальный плагин. У него есть много настроек. Все работает быстро и легко, также есть возможность просмотра слайдов на весь экран. Слайдер можно использовать как в фиксированном размере так и адаптивном, с миниатюрами и без, с круговой прокруткой и без и еще много чего. На базе фоторамы можно создать интересные адаптивные слайдеры для сайта.

P.S. Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

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

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18. Slit

Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах и анимация сделана достаточно необычно.

19. Адаптивная фотогалерея plus

Простой бесплатный слайдер-галерея с подгрузкой изображений.

20. Адаптивный слайдер для WordPress

Адаптивный и бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

Слайдеры для сайта третья часть.

23. Слайдер с jmpress.js

Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.

24. Fast Hover Slideshow

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

Аккордеон изображений с помощью css3.

Это адаптивная галерея которая оптимизирована для тач-устройств.

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

Слайдеры для сайта

1. Responsive Horizontal Posts Slider

2. Слайдер на Glide.js

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox — jQuery 3D image slider (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

Слайдеры для сайта вторая часть.

11. Flexslider

12. Фоторама

P.S. Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

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

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18. Slit

19. Адаптивная фотогалерея plus

Простой бесплатный слайдер-галерея с подгрузкой изображений.

20. Адаптивный слайдер для WordPress

Адаптивный и бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

Слайдеры для сайта третья часть.

23. Слайдер с jmpress.js

24. Fast Hover Slideshow

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

Аккордеон изображений с помощью css3.

Это адаптивная галерея которая оптимизирована для тач-устройств.

Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов, особенно большой популярностью пользуется адаптивный дизайн. И в связи с этим появилось не мало новых адаптивных jquery слайдеров , галерей, каруселей или подобных плагинов.
1. Responsive Horizontal Posts Slider

2. Слайдер на Glide.js

3. Tilted Content Slideshow

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

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

Слайдер с эффектом морфинга (Плавная трансформация из одного объекта к другому). В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox - jQuery 3D image slider (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

10.Free Animated Responsive Image Grid

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

11. Flexslider

12. Фоторама

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

P.S. Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

15. WOW Slider

WOW Slider - это слайдер изображений с потрясающими визуальными эффектами.

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18.Â Slit

Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах. анимация сделана достаточно необычно и красиво.

19. Адаптивная фотогалерея plus

Простой бесплатный слайдер-галерея с подгрузкой изображений.

20. Адаптивный слайдер для WordPress

Адаптивный бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

23. Слайдер с jmpress.js

24. Fast Hover Slideshow

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

25. Image Accordion with CSS3

Аккордеон изображений с помощью css3.

26. A Touch Optimized Gallery Plugin

Это адаптивная галерея которая оптимизирована для тач-устройств.

27. 3D Галерея

3D Wall Gallery - создана для браузера Safari, где будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.

28. Слайдер с пагинацией

Адаптивный слайдер с нумерацией страниц с помощью ползунка JQuery UI. идея состоит в том чтобы чтобы использовать простую концепцию навигации. Есть возможность перемотки всех изображений или послайдового переключения.

29.Image Montage with jQuery