Адаптивный слайдер на jQuery. Подборка адаптивных слайдеров AnoSlide – Ультра компактный адаптивный jQuery слайдер

Галереи изображений и слайдеры – одни из самых популярных форматов jQuery. Благодаря им вы можете добавить на сайт необходимый объем визуального контента, экономя при этом ценное место.

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

В сегодняшней статье мы собрали для вас лучшие галереи изображений и слайдеры jQuery.

Для их установки достаточно добавить выбранные плагины в раздел head HTML страницы вместе с библиотекой jQuery и настроить их согласно документации (всего пара строчек кода).

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

1. Bootstrap Slider

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

2. Product Preview Slider

Product Preview Slider воплощает в себе весь потенциал jQuery, он отлично встраивается в любой интерфейс. Также вас порадует качество и чистота кода этого плагина.

3. Expandable Image Gallery

Expandable Image Gallery – потрясающий плагин, который одним кликом мышки превращается в полноэкранную галерею. Его можно использовать для раздела “О нас” или для просмотра информации о товарах.

4. Fotorama

Fotorama – плагин отзывчивой галереи jQuery, который работает как для десктоп, так и для мобильных браузеров. Он предлагает множество опций навигации: миниатюры, прокрутку, кнопки “вперед” и “назад”, автоматический показ слайд-шоу и маркеры.

5. Immersive Slider

Immersive Slider позволяет создавать уникальный опыт просмотра слайдов, похожий на слайдер Google TV. Вы можете изменить фоновое изображение, которое будет размыто для сохранения фокуса на основных фото.

6. Leastjs

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

7. Sliding Panels Template

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

8. Squeezebox Portfolio Template

Squeezebox Portfolio Template предлагает motion-эффекты для портфолио. При наведении курсора на основное изображение (или блок) появляются привязанные элементы.

9. Shuffle Images

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

10. Free jQuery Lightbox Plugin

Free jQuery Lightbox Plugin поможет вам показать одно или несколько изображений на одной странице. Также их можно будет увеличить и вернуть к исходному размеру.

11. PgwSlider – Responsive slider for jQuery

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

12. Scattered Polaroids Gallery

Scattered Polaroids Gallery – потрясающий слайдер, выполненный в плоском дизайне. Его элементы хаотично движутся при переключении изображений, что выглядит потрясающе.

13. Bouncy Content Filter

Bouncy Content Filter – идеальное решение для и портфолио. Этот плагин позволяет пользователям быстро переходить из одной категории в другую.

14. Simple jQuery Slider

Simple jQuery Slider оправдывает свое название. Этот плагин сочетает в себе элементы JavaScript, HTML5 и CSS3. В демо по умолчанию доступна только загрузка текста, но если внести несколько изменений, можно будет добавить и визуальный контент.

15. Glide JS

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

16. Fullscreen drag-slider with parallax

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

Здравствуйте, дорогие читатели блога. Сегодня представляю Вам полезную подборку бесплатных JQuery слайдеров с примерами . Если Вы всё таки надумали поставить слайдер изображений на свой ресурс, эта подборка Вам очень пригодится, и, поверьте, вам есть с чего выбрать. Тем более все слайдеры с примерами, и каждый из них Вы сможете попробовать в действии. В общем не буду отвлекать, выбирайте:-)

Простой JQuery слайдер изображений

Самый обычный и не большой слайдер миниатюр на Вашем сайте.

Слайдер с миниатюрами на JQuery

Очень простой и интересный слайдер с миниатюрами, который подойдёт практически для любого дизайна.

Красивый слайдер для сайта

Большой и очень красивый слайдер изображений, с интересным перелистыванием текста.

Обычный JQuery слайдер

Самый обычный и простой слайдер на Ваш ресурс

Большой слайдер с описанием

Эффектный слайдер мимо которого нереально пройти.

JQuery слайдер картинок и описанием

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

Скроллинг изображений с подсказками

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

JQuery слайдер с большими стрелками

Интересный слайдер с большими розовыми стрелками, которые меняют размер за счёт увеличения изображения.

SliderPro - адаптивный jQuery слайдер c поддержкой миниатюр и другими настройками, включая также и собственное API.

• Слайдер по умолчанию подстраивается под размеры экрана. Масштабироваться будут не только изображения, но и слои с вашим дополнительным контентом.
• Поддержка touch-swipe событий для сенсорных экранов. Использование Breakpoints - аналог CSS media queries, для изменения настроек слайдера на различных размерах экрана.
• Плавная анимация с помощью css3 transitions, анимация слоев, fade эффект для смены слайдов.
• Слайдер может быть на всю ширину страницы, на весь экран или располагаться внутри контейнера.
• Автоизменение высоты слайда. Ориентация превьюшек может быть, как вертикальная, так и горизонтальная.
• Для изображений поддерживается lazy loading, retina, возможность подгружать различные изображения под конкретные размеры экранов.
• Поддержка видео, интеграция с lightbox, навигация стрелками, точками, клавиатурой, миниатюрами и многое, многое другое.

CSS

Подключаем файл стилей:

HTML

Пример разметки для вставки слайдера:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

consectetur adipisicing elit

JS

Подключаем необходимые скрипты:

Выполняем инициализацию плагина:

jQuery(document).ready(function($) { $("#my-slider").sliderPro(); });

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

1. Превосходное jQuery слайд-шоу

Большое эффектное слайд-шоу с использованием jQuery технологий.

2. jQuery плагин «Scale Carousel»

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

3. jQuery плагин «slideJS»

Слайдер изображений с текстовым описанием.

4. Плагин «JSliderNews» 5. CSS3 jQuery слайдер

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

6. Симпатичный jQuery слайдер «Presentation Cycle»

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

7. jQuery плагин «Parallax Slider»

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

8. Свежий, легкий jQuery слайдер «bxSlider 3.0»

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

9. jQuery слайдер изображений, плагин «slideJS»

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

10. jQuery плагин слайд-шоу «Easy Slides» v1.1

Простой в использовании JQuery плагин для создания слайд-шоу.

11. Плагин «jQuery Slidy»

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

12. jQuery CSS галерея с автоматической сменой слайдов

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

13. jQuery слайдер «Nivo Slider»

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.

14. jQuery слайдер «MobilySlider»

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

15. jQuery Плагин «Slider²»

Легкий слайдер с автоматической сменой слайдов.

16. Свежий javascript слайдер

Слайдер с автоматической сменой изображений.

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

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

19. jQuery слайдер«jShowOff»

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

20. Плагин «Shutter Effect Portfolio»

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

21. Легкий javascript CSS слайдер «TinySlider 2»

Реализация слайдера изображений с использованием javascript и CSS.

22. Обалденный слайдер «Tinycircleslider»

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

23. Слайдер изображений на jQuery

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

24. Галерея с миниатюрами «Slider Kit»

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

25. jQuery слайдер содержимого «Slider Kit»

Вертикальный и горизонтальный слайдер контента на jQuery.

26. jQuery слайд-шоу «Slider Kit»

Слайд-шоу с автоматической сменой слайдов.

27. Легкий профессиональный javascript CSS3 слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

29. Простое jQuery слайд-шоу

Слайд-шоу с кнопками навигации.

30. Потрясное слайд-шоу jQuery «Skitter»

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

31. Слайд-шоу «Awkward»

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

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

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

34. «Flux Slider» слайдер на jQuery и CSS3

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

35. jQuery плагин «jSwitch»

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

37. Новая версия плагина «SlideDeck 1.2.2»

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

38. jQuery слайдер «Sudo Slider»

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

39. jQuery CSS3 слайд-шоу

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

40. jQuery cлайдер «Flux Slider»

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

41. Простой 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 — это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами.