Красивые всплывающие подсказки с помощью jQuery. Интерактивная карта с всплывающими подсказками Автоматически всплывающие описания изображений на jquery

1. Обалденное слайд-шоу на jQuery «Elastic Slideshow»

Слайд-шоу с миниатюрами и описанием слайдов. Различные эффекты смены изображений. Предусмотрено два варианта: с автоматической сменой слайдов и без.

2. Pure CSS3 Slider

Симпатичный слайдер изображений с описанием и автоматической сменой слайдов. При наведении курсора на изображение ротация останавливается. Остановка сопровождается CSS3 эффектом.

3. jQuery плагин «Фоторама»

Хорошая галерея-слайдер.

4. Текстовые эффекты «Typography Effects»

Интересные эффекты для работы с типографикой с помощью CSS3 и jQuery. 7 различных классных эффектов.

5. Плагин «Darkbox»

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

6. Hover-эффект на jQuery

Круговой эффект при наведении.

7. Анимированные jQuery CSS3 кнопки

Много различных анимированных CSS3 эффектов для создания потрясающих кнопок для вашего сайта. Просто очень клевые эффекты при наведении.

8. HTML5 jQuery смена фоновых изображений

При нажатии на миниатюры фоновые изображения сменяют друг друга с эффектом размытия. При изменении размера окна браузера изменяется размер фонового изображения.

8. Interactive Typography Effects

Интересные текстовые эффекты с использованием HTML5 и jQuery (4 различных эффекта). Наведите курсор на текст, чтобы увидеть эффект.

9. Всплывающие подписи изображений

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

10. Плагин «Portamento»

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

11. Скроллеры содержимого

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

12. Плагин «Scrollbars»

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

13. Плагин «Tiny Scrollbar»

jQuery плагин для реализации вертикальной и горизонтальной прокрутки контента.

Демо

Скачать

14. Плагин «jScrollPane»

Кросс-браузерная прокрутка содержимого в блоке.

15. Плавающий блок «Scroll Follow»

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

16. Всплывающие панели «SideBar»

Выезжающие панели со всех сторон веб-страницы.

17. Эффектные CSS3 решения для оформления страницы-заглушки

Три варианта реализации анимированных эффектов для создания заглушки «Сайт в разработке».

17. Эффект при прокрутке страницы

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

19. Плагин «fancyBox 2»

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

20. Minimit Gallery

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

21. jQuery News Ticker

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

22. Adaptive Images

Масштабируемые изображения для отображения на мобильных устройствах. Размеры изображений зависят от размера окна. Используемые технологии: JavaScript и PHP5.

23. vScroller

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

24. Многоуровневое выпадающее меню «jQSimpleMenu»

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

25. «jsCarousel 2.0»

jQuery плагин для реализации вертикальных и горизонтальных каруселей.

26. Ротатор «Dynamic News»

jQuery плагин для симпатичного отображения последних новостей из RSS ленты.

27. Анимированное меню

Анимированный эффект при наведении на пункт меню.

28. Анимированный текстовый эффект

Три эффектных примера работы с CSS свойством «background-clip: text». CSS3 эффект не работает в старых браузерах.

29. CSS3 jQuery эффект размытия

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

30. CSS3 jQuery всплывающие подсказки

31. jQuery всплывающие подсказки при наведении

32. Легкое CSS меню

33. Записки CSS3 и HTML5

Реализация блоков, похожих на записки с текстом.

34. Rlightbox

Отображение медиаконтента во всплывающих блоках: изображения, видео, Flash.

35. jQuery зуммер

Увеличение квадратной области.

36. CSS3 jQuery описание изображений

Плагин «Based Sliding Door Content Gallery» для реализации всплывающих описаний изображений. При наведении курсора на какое-нибудь из представленных изображений появляется краткое описание со ссылкой на полную статью. При наведении: эффект поднятия гаражных дверей.

37. Эффект «До и после» jQuery плагин «uCompare»

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

38. Эффект вращения изображения

39. Интерактивные карты мира и Европы и США

40. Слайд-шоу «Slider.js v1.1»

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

1. jQuery плагин «Hover Zoom»

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

2. Плагин «Captify»

3. jQuery описание изображений в галерее

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

4. jQuery реализация подписей изображений

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

5. jQuery эффект раздвижных дверей

При наведении на миниатюру на ее месте эффектно появляется описание.

6. jQuery плагин «Zoominfo»

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

7. jQuery плагин «Mosaic»

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

При наведении курсора мыши на изображение выезжает краткое описание со ссылкой на подробную информацию.

9. Плагин для реализации подписи изображений

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

10. Описание изображений «Preview window»

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

Подготовлено по материалам

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

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

3. Классное оформление диаграмм на сайте

Анимированная круговая диаграмма, созданная с использованием JavaScript библиотеки Raphaël.

Легкое выпадающее CSS3 меню для сайта.

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

6. Фоновая jQuery анимация на странице

Анимированный jQuery эффект при перемещении курсора по экрану.

7. Плагин «Blackbird»

Функциональное решение аналог alert() в JavaScript. Вы сможете подробнее почитать об использовании «Blackbird» на демонстрационной странице.

8. Ajax библиотека JSF компонентов «OpenFaces»

Набор различных Ajax компонентов на JFS фреймворке с открытым исходным кодом для создания элементов пользовательского интерфейса. В набор компонентов входят самые распространенные элементы интерфейса: компоненты для работы с таблицами и графиками, вкладки, всплывающие окна, фильтры, меню, календари, компоненты для работы с формами и много других Ajax решений. Вы можете посмотреть все компоненты в действии на демонстрационной странице. «OpenFaces» распространяется по двум видами лицензий: бесплатной и коммерческой.

9. «Wijmo» набор jQuery UI виджетов для создания элементов пользовательского интерфейса

Коллекция профессиональных виджетов для веб-разработчиков. В набор «Wijmo» входят следующие бесплатные jQuery решения: аккордеоны , календари , всплывающие диалоговые окна , экспандеры , стилизованные формы , различные списки , меню , индикаторы загрузки «progressbar», вкладки (табы), всплывающие подсказки и другие полезные виджеты. Разработчики «Wijmo» предлагают помимо бесплатных решений также качественные коммерческие jQuery UI наработки. После скачивания архива, вы сможете посмотреть все возможные виджеты в действии, они находятся в дериктории wijmo-open/development-bundle/samples/. Этот набор обязательно сэкономит вам уйму времени при разработке ваших веб-проектов.

10. Оформление поискового поля с применением jQuery

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

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

12. Масштабируемый текст jQuery «Sliding Letters»

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

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

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

14. jQuery плагин «jQueryZoom»

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

15. jQuery галерея «jSwitch»

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

16. JavaScript галерея с 3D эффектом

17. Галерея «jQuery morphing gallery»

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

18. Новое CSS3 меню в стиле Apple

Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.

19. Свежая реализация всплывающих подсказок на jQuery «Tooltipsy»

Много различных эффектов появления всплывающих подсказок при наведении.

20. JavaScript галерея для просмотра на мобильных устройствах «PhotoSwipe»

Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

21. Стильное CSS3 меню

22. jQuery плагин «Magnifier»

Эффект увеличения области изображения при наведении.

23. Ajax корзина заказов «Easy Basket» для интернет-магазина

Функциональная корзина заказа для интернет-магазина с интегрированными методами оплаты товара с помощью PayPal или Google Checkout. Используемые технологии: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Легко встраивается в веб-страницу и настраивается внешний вид корзины.

24. jQuery плагин «Grid Navigation Effects»

Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом jQuery решении также предусмотрен эффект при наведении курсора на миниатюру.

25. Фоновый эффект «Vertical Parallax»

5. Переключение вида отображения блоков на jQuery

С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.

26. Аналоговые часы на jQuery

27. jQuery HTML5 портфолио

Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории.

28. Галерея с миниатюрами «TN3 Gallery»

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

29. Описание изображений «Preview window»

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

30. JavaScript карусель

31. Сетка изображений «Grid-Gallery»

36. Слайд-шоу

В правом верхнем углу слайда можно включить/выключить автоматическую смену слайдов.

37. Выпадающее меню «jbar»

38. Анимированное меню на jQuery

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все - пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

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

Слайд-шоу с оригинальным эффектом смены изображений.

40. Анимированный jQuery CSS3 эффект

41. Галерея изображений jQuery

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

Фоновый эффект (движение по слоям). На демонстрационной странице поводите мышкой по экрану, чтобы увидеть эффект в действии.

43. jPaginator CSS3 плагин постраничного разбиения

44. Плагин Plasm The Wall

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

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

Идея

Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент div с содержанием подсказки и установить для него атрибуты HTML5 data для позиционирования.

Атрибуты HTML5 data и jQuery

HTML5 имеет отличный инструмент - пользовательские атрибуты data , который позволяет хранить произвольный набор метаданных. Данный атрибут позволяет избежать использования атрибутов rel или title для различных задач в Javascript.

Синтаксис атрибута data имеет вид:

А в jQuery получить значение можно следующим образом:

Var test = $("div").data("foo");

В данном уроке атрибут data будет использоваться для хранения координат метки.

HTML

Северная Америка

• Площадь (кв.км): 24,490,000
• Население: 528,720,588

• #wrapper - данный элемент является контейнером для всех остальных элементов.
• img -изображение, которое будет служить фоном.
• .pin - абсолютно позиционируемый элемент, который содержит метку и содержание подсказки, которое будет выводиться обработчиком события. Класс pin-down определяет тип метки.
• data-xpos="450" data-ypos="110" - атрибут HTML5 data , который хранит координаты X (по горизонтали) и Y (по вертикали) в px для позиционирования метки. В данном примере метка будет располагаться на 450px от левой стороны изображения и на 110px сверху.

CSS

Код CSS достаточно простой и очевидный:

/* Относительное позиционирование */ #wrapper { position: relative; margin: 50px auto 20px auto; border: 1px solid #fafafa; -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5); box-shadow: 0 3px 3px rgba(0,0,0,.5); } /* Скрываем оригинальное содержание подсказки */ .pin { display: none; } /* Стили для подсказкии и метки */ .tooltip-up, .tooltip-down { position: absolute; background: url(arrow-up-down.png); width: 36px; height: 52px; } .tooltip-down { background-position: 0 -52px; } .tooltip { display: none; width: 200px; cursor: help; text-shadow: 0 1px 0 #fff; position: absolute; top: 10px; left: 50%; z-index: 999; margin-left: -115px; padding:15px; color: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7); -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7); box-shadow: 0 3px 0 rgba(0,0,0,.7); background: #fff1d3; background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90)); background: -webkit-linear-gradient(top, #fff1d3, #ffdb90); background: -moz-linear-gradient(top, #fff1d3, #ffdb90); background: -ms-linear-gradient(top, #fff1d3, #ffdb90); background: -o-linear-gradient(top, #fff1d3, #ffdb90); background: linear-gradient(top, #fff1d3, #ffdb90); } .tooltip::after { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #fff1d3; border-left: 10px solid transparent; border-right:10px solid transparent; } .tooltip-down .tooltip { bottom: 12px; top: auto; } .tooltip-down .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-top: 10px solid #ffdb90; } .tooltip h2 { font: bold 1.3em "Trebuchet MS", Tahoma, Arial; margin: 0 0 10px; } .tooltip ul { margin: 0; padding: 0; list-style: none; }

jQuery

$(document).ready(function(){ // Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения $("#wrapper").css({"width":$("#wrapper img").width(), "height":$("#wrapper img").height() }) //Направление символа подсказки var tooltipDirection; for (i=0; i<$(".pin").length; i++) { // Устанавливаем направление символа подсказки - вверх или вниз if ($(".pin").eq(i).hasClass("pin-down")) { tooltipDirection = "tooltip-down"; } else { tooltipDirection = "tooltip-up"; } // Добавляем подсказку $("#wrapper").append("

Как это работает

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

1. Устанавливаем изображение (в элементе
   ) на котором надо выводить метку.
2. Добавляем содержание подсказки в элемент
3. jQuery сделает все остальное :
   • На основании размеров изображения установит размеры контейнера.
   • Скроет оригинальное содержание подсказки (с помощью правил CSS) и добавит новый элемент.
   • Добавленная метка и подсказка будут позиционироваться в точке с координатами, заданными в атрибутах data .
   • Затем с помощью событий mouseenter и mouseleave подсказка будет выводиться и скрываться по необходимости.

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

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

WOW Slider

Адаптивный jQuery слайдер изображений с великолепным набором визуальных эффектов (повороты, вылеты, размытие, спирали, жалюзи и т.д...) и множеством готовых шаблонов. С помощью встроенного в WOW Slider мастера вставки на страницу, вы сможете легко и непринужденно создавать потрясающие слайд-шоу за считанные минуты. На сайте разработчика присутствует вся необходимая документация по настройке и использованию плагина на Русском языке, отличные живые примеры работы плагина. Также доступны для скачивания отдельный плагин Wordpress и модуль для Joomla. Уверен, что многим понравится этот замечательный слайдер, как новичкам, так и поднаторевшим веб-мастеровым.

HiSlider

HiSlider — HTML5, Jquery слайдер и галерея изображений, абсолютно бесплатный плагин для личного пользования на сайтах под управлением популярных систем — WordPress, Joomla, Drupal. С помощью этого простого, но довольно функционального инструмента, вы сможете без особого труда создавать на страницах своих сайтов, удивительные и яркие слайд-шоу, эффектные презентации и анонсы новых сообщений. Несколько готовых шаблонов и скинов для слайдера, потрясающие эффекты перехода(смены) содержания, вывод различного мультимедийного контента: , видео с YouTube и Vimeo, гибкие пользовательские настройки и т.д...

Nivo Slider

Nivo Slider — старый-добрый, хорошо известный всем кто в теме, один из самых красивых и простых в использовании слайдер изображений. Плагин JQuery Nivo Slider является бесплатным для загрузки и дальнейшего использования, распространяется под лицензией MIT. Так же имеется отдельный плагин для WordPress, но к сожалению уже платный и отвалить за него придется 29$ за одну лицензию. Лучше всё же немного поколдовать с файлами темы WP и прикрутить свободную jQuery версию плагина Nivo Slider к своему блогу, благо инфы как это сделать в сети достаточно.
Что касается функционала, с этим всё в полном порядке. Для работы используется библиотека jQuery v1.7+, красивые эффекты переходов, простые и очень гибкие настройки, адаптивный макет, автоматическая обрезка изображения и многое другое.

Идея слайдера была навеяна разработчикам, хорошо известным всем стилем представления продукции Apple, где несколько небольших предметов(картинок) меняются по клику на выбранную категорию с простеньким эффектом анимации. Codrops представляет в ваше распоряжение подробнейший урок по созданию этого слайдера, полный расклад Html-разметки, набор правил CSS и исполняемый jQuery плагин, а так же замечательный живой пример использования слайдера.

Slit Slider

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

Elastic Content Slider

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

3D Stack Slider

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

Очень простой, 100% адаптивный и полноэкранный jQuery слайдер изображений. Работа слайдера основана на CSS переходах(свойство transition) в связке с магией jQuery. Значение max-width по умолчанию установлено на 100%, по-этому размер картинок будет изменяться в зависимости от изменений размеров экрана. Ни каких особых анимационных эффектов и изысков в оформлении, всё просто, и заточено на бесперебойную работу.

Minimal Slides

Название говорит само за себя, это пожалуй один из самых легковесных и минималистичных jQuery слайдеров изображений, которые мне встречались(плагин в 1kb). ResponsiveSlides.js -крошечный плагин JQuery, который создает слайд-шоу, используя элементы внутри контейнера. Работает с широким диапазоном браузеров, включая все версии IE — знаменитого тормоза прогресса, от IE6 и выше. В работе используются CSS3 переходы в связке с javascript, для надёжности. Простая разметка с использованием неупорядоченного списка, настройка переходов и временных интервалов, автоматическое и ручное управление переключением слайдов, а так же поддержка сразу нескольких слайд-шоу. Вот такой вот резвый «малыш».

Camera

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

bxSlider jQuery

Ещё один, довольно простой адаптивный слайдер на jQuery. В слайдах можно размещать любой контент, видео, изображения, текст и другие элементы. Расширенная поддержка сенсорных экранов. Использование CSS-анимации переходов. Большое количество различных вариаций представления слайд-шоу и компактных галерей изображений. Автоматическое и ручное управление. Переключение слайдов с помощью кнопок и посредством выбора миниатюр. Небольшой размер исходного файла, очень прост в настройках и реализации.

FlexSlider 2

FlexSlider 2 — Обновленная версия одноименного слайдера, с улучшенной скоростью реагирования, минификацией скрипта, и сведением к минимуму перекомпоновки/перерисовки. Плагин включает в себя базовый слайдер, контроль управления слайдами с помощью миниатюр, встроенных стрелок влево-вправо и нижней панели навигации в виде кнопок. Возможность вывода в слайдах видео(vimeo), гибкие настройки параметров(переходы, оформление, временной интервал), полностью адаптивный макет.

Galleria

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

Blueberry

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

jQuery popeye 2.1

Очень компактный jQuery слайдер изображений с элементами Lightbox. Благодаря своим гибким размерам, очень просто встраивается в любой контейнер, в одиночную запись в виде миниатюр, при наведении курсора мыши или клике на которые, активируется лайтбокс с увеличенной картинкой и элементами управления. Удобно размещать такой слайдер в боковых панелях, для представления продуктов или анонсов новостей. Отличное решение для сайтов с большим объёмом информации.

Sequence

Бесплатный адаптивный слайдер с расширенными CSS3 переходами. Минималистичный стиль, 3 темы оформления, Каждый кадр скользит в горизонтальном направлении появляясь в центре картинка уходит влево, подпись вправо, миниатюры дублируются в нижнем правом углу. Разбиение на страницы представления ​​продуктов для просмотра в каждом кадре. Управление так же включает кнопки назад и вперед. Поддержка всеми современными браузерами.

Swipe

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

Responsive Image Slider

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

FractionSlider

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

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

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

С Уважением, Андрей