38 jQuery каруселей, ротаторов и скроллеров для сайта
1. jQuery карусель «clickCarousel»
2. jQuery карусель
Блок с прокруткой анонсов новостей. Для прокрутки блоков используются стрелки влево/вправо. В архиве карусель в двух стилевых оформлениях: светлом и темном.
1. jQuery карусель, плагин «carouFredSel»
Аккуратная свежая карусель изображений на jQuery.
4. jQuery плагин: карусель «Elastislide»
5. Плагин «TinyCarousel»
Отличные слайдеры контента в виде карусели изображений с применением jQuery. На демонстрационной странице описано, как прикрутить эту карусель к своему сайту.
6. jQuery карусель
Плагин «Slider Kit», легкая карусель с различными способами прокрутки.
7. javascript карусель
Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом jQuery решении также предусмотрен эффект при наведении курсора на миниатюру и прокрутка с помощью колеса мыши.
9. Легкая карусель
10. Карусель из блоков «Easy Paginate»
jQuery плагин «Easy Paginate». Каждый прямоугольный блок представляет собой обычный пункт списка li, при этом если пунктов больше трех, то чтобы просмотреть их все необходимо воспользоваться навигацией, подобной слайдеру (с помощью стрелок «вперед», «назад» и с помощью кнопок навигации внизу).
11. Вертикальный ротатор «Vertical Ticker»
Вертикальный ротатор на jQuery: автоматическое прокручивание контента на странице. Предусмотрены кнопки навигации, а также возможность остановить ротацию и запустить ее снова. При наведении курсора мыши движение останавливается. На уровне HTML разметки прокручивающиеся блоки представлены обычными пунктами списка li.
12. javascript CSS прокручивающаяся область
javascript решение «TinyScroller» для создания прокручивающейся области, помещенной в контейнер DIV.
13. jQuery плагин «Smooth Div Scroll»
Плагин для реализации горизонтальной прокрутки содержимого в определенной области. При наведении курсора мыши на левый или правый край области, начинается прокручивание.
14. Ротатор контента
Навигация между слайдами с контентом может осуществляться с помощью стрелок или по нажатию на миниатюру. Снизу есть кнопка «Show», позволяющая скрыть/показать миниатюры или полное описание слайда.
15. Ротатор контента «Circular Content Carousel»
При нажатии на ссылку «More» в одном из вращающихся блоков с содержимым, эффектно открывается его подробное описание. Прокручивание осуществляется с помощью нажатия на стрелки Вправо/Влево.
16. jQuery карусель
17. Скроллер
Блок со скроллером, появляющимся при наведении курсора. Прокручивать содержимое можно как с помощью полосы прокрутки, так и с помощью колеса мыши.
18. jQuery карусель
Подобное jQuery решение было сделано под впечатлением от подобного эффекта на сайте Apple. Разработчики этой корпорации всегда находили интересные решения, которыми вдохновлялись веб-мастера со всего мира. Для демонстрации плагина выберите из какую-нибудь категорию из списка.
19. Потрясающий слайдер
Слайдер генерируется автоматически. Данные с названием товара, описанием, ссылкой и адресом изображения берутся из файла slider.db.txt. Используемые технологии: CSS, PHP, jQuery.
20. Ротация блоков c использованием jQuery
Для того, чтобы просмотреть эффект ротации блоков, нажмите на один из маленьких прямоугольников на демонстрационной странице
21. Ротатор контента на jQuery
Плагин для прокрутки контента, например, можно использовать для показа последних новостей или для показа Twitter летны на сайте.
22. Динамический блок «Отзывы клиентов»
Автоматическая ротация содержимого блока. Используемые технологии: PHP, XML, CSS, jQuery.
23. Слайд-шоу в стиле Apple
24. Прокручивание изображений по кругу
25. jQuery карусель
Этот плагин прообразовывает пункты списка (ul li) в элементы jQuery карусели.
26. javascript карусель «ImageFlow»
Изображения легко прокручивать с помощью колеса мыши.
27. Прокручивание контента
28. Компактный вывод анонсов последних материалов или новостей
Компактный блок с анонсом последних материалов на сайте или новостей. В левой колонке отображается разбитый на страницы список из кратких анонсов последних новостей. При выборе одного из них в правой колонке отображается более подробное описание и ссылка на прочтение полного текста публикации. Реализовано с помощью jQuery.
29. Вертикальный jQuery скроллер
Смена слайдов происходит в вертикальном направлении.
30. jQuery плагин jCoverflip
Эффектный jQuery плагин с колесом прокрутки.
31. Новостная лента
Прокручивающаяся вертикальная лента новостей на javascript.
22. jQuery Image Scroller
Скролируются изображения со ссылками, при наведении мышки прокручивание останавливается и появляется панель навигации. При наведении мышки на картинку отображается также ее название между кнопками управления. Очень красиво смотрится на странице
33. Прокрутка содержимого, Mootools плагин «Scrollbar»
Прокручивание осуществляется как при помощи полосы прокрутки, так и с помощью колеса мыши.
7 мощных каруселей изображений для Web-дизайнеров / Habr
Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.1. Agile Carousel
Agile Carousel является jQuery-плагином, позволяющим создать крайне гибкую карусель с расширенным набором настроек. Он поддерживает текст и изображения в каждом фрейме и навигатор для отображения, в каком именно фрейме Вы находитесь. Взгляните сюда, чтобы увидеть ее в действии, это мой абсолютный фаворит!
2. Yahoo! UI Carousel Control
Yahoo! UI Carousel Control предоставляет виджет для просмотра ряда похожих объектов, выстроенных вертикально или горизонтально в регионе-оверлее на странице. Метафора «карусели» вытекает из аналогии с каруселью слайдов в дни пленочной фотографии; виджет карусели может следовать этой метафоре, позволяя непрерывную навигацию по кругу через все фреймы содержания.
3. jCarousel
jCarousel является плагином jQuery для управления списком блоков в горизонтальном или вертикальном порядке. Блоки, которые могут содержать статичный HTML, или загружать содержимое через (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без таковой).
4. jCarousel Lite
jCarousel Lite является плагином для jQuery, который отправляет Вас в путешествие по карусели изображений и HTML-содержания. Проще говоря, вы можете перемещаться по изображениям и/или HTML в стиле карусели, используя данный виджет. Этот плагин крайне лёгок, примерно 2 КБ, но очень гибок и настраиваем с учетом большинства наших потребностей.
5. Простая карусель изображений в стиле Flickr
В этом руководстве показано, как реализовать карусель просто из набора изображений, чтобы создать слайд-шоу в стиле Flickr с использованием библиотеки Prototype-UI.
6. iCarousel
iCarousel является мощной каруселью, построенной с использованием MooTools v1.1, полностью настраиваемой пользователей всего за несколько шагов. Вы можете изменить любой параметр по умолчанию просто инициализируя класс объектом настроек в формате JSON. Эта карусель протестирована в Internet Explorer, Firefox, Opera и Safari.
7. Carousel.us
Carousel.us является современной трёхмерной Javascript-каруселью, которая использует, как основу, или MooTools и Reflection.js от Кристофа Бейлза, или Prototype.js и Script.aculo.us совместно с Reflection.js. Взгляните сюда, чтобы увидеть ее в действии.
25 бесплатных адаптивных слайдеров типа Карусель на jQuery
В настоящее время слайдер – карусель – функционал, который просто необходимо иметь на сайте для бизнеса, сайте – портфолио или любом другом ресурсе. Наряду с полноэкранными слайдерами изображения, горизонтальные слайдеры – карусели хорошо вписываются в любой веб-дизайн.
Иногда слайдер должен занимать одну треть страницы сайта. Здесь слайдер – карусель используется с эффектами переходов и с адаптивными макетами. Сайты электронной коммерции используют слайдер – карусель для демонстрации множества фото в отдельных публикациях или страницах. Код слайдера можно свободно использовать и изменять его в соответствии с потребностями.
Используя JQuery совместно с HTML5 и CSS3, можно сделать ваши страницы более интересными, снабдив их уникальными эффектами, и обратить внимание посетителей на конкретную область сайта.
Slick – плагин современного слайдера – карусели
Slick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки» для мобильных устройств, и, в режиме «перетаскивания» для десктопной версии.
Содержит эффект перехода «затухание», интересную возможность «режим в центре», ленивую загрузку изображений с автопрокруткой. Обновленный функционал включает в себя добавление слайдов и фильтр слайдов. Все для того, чтобы вы настроили плагин в соответствии с вашими требованиями.
Демо-режим | Скачать
Owl Carousel 2.0 – jQuery – плагин с возможностью использования на сенсорных устройствах
В арсенале этого плагина – большой набор функций, подходящий как для новичков, так и для опытных разработчиков. Это обновленная версия слайдера – карусели. Его предшественник именовался точно также.
Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0.
Поддержка возможности drag and drop включена для более удобного использования плагина на мобильных устройствах.
Плагин отлично подойдет для отображения больших изображений даже на маленьких экранах мобильных устройств.
Примеры | Скачать
jQuery плагин Silver Track
Довольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.
Примеры | Скачать
AnoSlide – Ультра компактный адаптивный jQuery слайдер
Ультра компактный jQuery слайдер – карусель, функционал которого намного больше, чем у обычного слайдера. Он включают в себя предварительный просмотр одного изображения, отображение нескольких изображений в виде карусели и слайдера на основе заголовков.
Примеры | Скачать
Owl Carousel – Jquery слайдер – карусель
Owl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop, легко встраиваемый в HTML – код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой – либо специально подготовленной разметки.
Примеры | Скачать
3D галерея – карусель
Использует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.
Примеры | Скачать
3D карусель с использованием TweenMax.js и jQuery
Великолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.
Примеры | Скачать
Карусель с использованием bootstrap
Адаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.
Примеры | Скачать
Основанный на Bootstrap – фреймворке слайдер – карусель Moving Box
Наиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера – карусели часто встречается на сайтах любого типа.
Примеры | Скачать
Tiny Circleslider
Это слайдер крошечного размера готов работать на устройствах с любым разрешением экрана. Слайдер может работать как в круговом, так и карусельном режиме. Tiny circle представлен как альтернатива другим слайдерам подобного типа. Имеется встроенная поддержка операционных систем IOS и Android.
В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.
Примеры | Скачать
Слайдер контента Thumbelina
Мощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.
Примеры | Скачать
Wow – слайдер – карусель
Содержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.
Примеры | Скачать
Адаптивный jQuery слайдер контента bxSlider
Измените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.
Примеры| Скачать
jCarousel
jCarousel – jQuery плагин, который поможет организовать просмотр ваших изображений. Вы сможете с легкостью создавать пользовательские карусели изображений из основы который показан в примере. Слайдер адаптивный и оптимизирован для работы на мобильных платформах.
Примеры| Скачать
Scrollbox – jQuery плагин
Scrollbox компактный плагин для создания слайдера – карусели или текстовой бегущей строки. Основные функции включают в себя эффект вертикальной и горизонтальной прокрутки с паузой при наведении курсора мыши.
Примеры | Скачать
dbpasCarousel
Простой слайдер – карусель. Если вам нужен быстрый плагин – этот подойдет на 100%. Поставляется только с основными функциями, необходимыми для работы слайдера.
Примеры | Скачать
Flexisel: адаптивный JQuery плагин слайдера – карусели
Создатели Flexisel вдохновились плагином старой школы jCarousel, сделав его копию, ориентированную на корректную работу слайдера на мобильных и планшетных устройствах.
Адаптивный макет Flexisel, при работе на мобильных устройствах, отличается от макета, ориентированного на размер окна браузера. Flexisel отлично адаптирован к работе на экранах, как с низким, так и высоким разрешением.
Примеры | Скачать
Elastislide – адаптивный слайдер – карусель
Elastislide отлично адаптируется под размер экрана устройства. Вы можете задать минимальное количество отображаемых изображений при определенном разрешении. Хорошо работает в качестве слайдера – карусели с галерей изображений, используя фиксированную обертку совместно с эффектом вертикальной прокрутки.
Пример| Скачать
FlexSlider 2
Свободно распространяемый слайдер от Woothemes. По праву считается одним из лучших адаптивных слайдеров. Плагин содержит несколько шаблонов и будет полезен как начинающим пользователям, так и экспертам.
Пример| Скачать
Amazing Carousel
Amazing Carousel – адаптивный слайдер изображений на jQuery. Поддерживает множество систем управления сайтами, такие как WordPress, Drupal и Joomla. Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing carousel позволяют использовать слайдер в вертикальном, горизонтальном и круговом режимах.
Примеры | Скачать
Thumbnail Carousel – адаптивная галерея изображений
Самым простым руководством к этому плагину является рекомендация просто установить его и создать адаптивную галерею с эскизами. Исходный код есть в свободном доступе. Плагин хорошо адаптирован для работы с мобильными устройствами.
Пример | Скачать
jQuery плагин Liquid Carousel
Liquid carousel похож на Elastislide тем, что контейнер, содержащий слайдер – карусель, адаптивен к размерам экрана.
Примеры | Скачать
jQuery плагин CarouFredsel
CarouFredSel – плагин, позволяющий интегрировать содержимое сайтов Flickr, 500px и instagram. А также параллельно использовать собственные изображения в карусели. jQuery версия распространяется бесплатно и доступна на github.
Примеры | Скачать
Адаптивный бесконечный слайдер – карусель
Плагин, создающий круговую адаптивную карусель прокрутки изображений. Прокручивание изображений выполняется по кругу.
Пример | Скачать
Tikslus Carousel 2.0
Этот адаптивный слайдер – карусель использует совершенно новую реализацию стрелок для предыдущего и последующего изображений. Еще одна особенность плагина, на которую следует обратить внимание, возможность работы в полноэкранном режиме и наличие кнопки «Пауза» в окне предварительного просмотра изображений. Я уверен, что этот плагин пригодится для многих проектов.
Пример | Скачать
Перевод статьи “25 Free Responsive Jquery Carousel Slider Plugins” был подготовлен дружной командой проекта Сайтостроение от А до Я.
JQuery Вертикальная Бесконечная Карусель — CodeRoad
Я искал последние два часа, есть ли какой-нибудь плагин jQuery, который делает вертикальный Бесконечный эффект карусели? чтобы быть более конкретным вот необходимый макет:
К сожалению, у меня действительно нет ни опыта, ни времени, чтобы учиться прямо сейчас, чтобы достичь этого чистым творением… Даже просто указать мне правильное направление было бы здорово…
Любая Помощь Очень Ценится
javascript jquery jquery-plugins Поделиться Источник Dawid van der Hoven 29 мая 2013 в 09:525 Ответов
Поделиться kelunik 29 мая 2013 в 10:00
Поделиться user2239256 29 мая 2013 в 09:59
0
Проверьте carouFredSel. Он поддерживает бесконечную карусель & имеет простой в использовании генератор кода на сайте.
http://caroufredsel.dev7studios.com/
Поделиться Francis Kim 29 мая 2013 в 09:54
Поделиться AlphaMale 29 мая 2013 в 09:58
0
Не уверен, что они подходят, но, возможно, проверить:
Крошечная Карусель
jq.carousel
удивительные crousel
http://ryrych.github.io/rcarousel/
jQuery.silver_track
bx слайдер
Elastislide
Поделиться Danny 27 сентября 2015 в 05:45
Вертикальная карусель jquery или javascript непрерывная
мне нужна вертикальная карусель, чтобы показать некоторые вещи, такие как Lastest NEWS. И мне нужно быть бесконечным и никакой помощи мыши… все происходит автоматически. пожалуйста, мне нужна…
JQuery вертикальная Карусель бесконечная прокрутка
У меня есть небольшая проблема с вертикальной прокруткой карусели. Я использую JQuery, HTML и CSS для этого проекта. Идея состоит в том, чтобы бесконечно прокручивать его в вертикальном движении, он…
доступная карусель / слайдер требуется
После нескольких часов поиска я все еще не могу найти нужный carousel/slider. это на самом деле то, что мне нужно, но его не доступны в том, что, как только javascript отключен в браузере, все…
Вертикальная Карусель jQuery
Я пытаюсь Создать карусель,моя первая попытка в первую очередь. http://jsfiddle.net/PmNM5 / HTML содержит UL LI, каждый LI имеет 2 изображения, оба из которых имеют ширину 242px и высоту = 81px Из…
Jquery возвращает номер индекса для каждого элемента в массиве и устанавливает этот индекс в атрибуте Rel бесконечная карусель
Я пытаюсь манипулировать Jquery Infinite Carousel в динамическом изменении размера контейнера изображений на основе текущего отображаемого изображения. Мне нужно получить индекс элемента Li, который…
Jquery вертикальная карусель
Знаете ли вы, что любая карусель jquery, которая не нуждается в дополнительном markup или so…here, — это мой markup: <ul class=navigation> <li class=navigation-top><a href=#…
jQuery бесконечная карусель оставляет пустое пространство при прокрутке влево
вертикальная карусель отсекает изображения
В настоящее время я стремлюсь реализовать вертикальную карусель, чтобы пользователи могли перемещаться по галерее thumbanils, карусель предназначена для отображения 3 элементов за клик, однако она…
jQuery бесконечная карусель: предыдущий сбой движения слайда
Итак, я пытаюсь построить бесконечную карусель jQuery, и она работает довольно хорошо в одном направлении, но не в другом. Ну это работает по-другому, но только отчасти. Чтобы сделать бесконечную…
Бесконечная карусель с ванилью JavaScript
Я пытаюсь построить свою собственную карусель с чистым JavaScript. Я борюсь с подбором наиболее эффективного способа добавления опции infinite carousel . По некоторым причинам, каждый элемент…
Jquery вертикальная карусель — CodeRoad
Знаете ли вы, что любая карусель jquery, которая не нуждается в дополнительном markup или so…here, — это мой markup:
jquery jquery-plugins<ul> <li><a href="#" title="Up"><span></span></a></li> <li><a href="#" title="Shopping">Shopping1</a></li> <li><a href="#" title="Shopping">Shopping2</a></li> <li><a href="#" title="Shopping">Shopping3</a></li> <li><a href="#" title="Shopping">Shopping4</a></li> <li><a href="#" title="Shopping">Shopping5</a></li> <li><a href="#" title="Shopping">Shopping6</a></li> <li><a href="#" title="Shopping">Shopping7</a></li> <li><a href="#" title="Shopping">Shopping8</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Up"><span></span></a></li> </ul><!--[end] /.navigation-->
Поделиться Источник Uffo 28 ноября 2009 в 00:49
2 Ответа
Поделиться fviktor 28 ноября 2009 в 01:07
Поделиться minnur 20 августа 2014 в 20:59
Вертикальная карусель jquery или javascript непрерывная
мне нужна вертикальная карусель, чтобы показать некоторые вещи, такие как Lastest NEWS. И мне нужно быть бесконечным и никакой помощи мыши… все происходит автоматически. пожалуйста, мне нужна…
Вертикальная Карусель jQuery
Я пытаюсь Создать карусель,моя первая попытка в первую очередь. http://jsfiddle.net/PmNM5 / HTML содержит UL LI, каждый LI имеет 2 изображения, оба из которых имеют ширину 242px и высоту = 81px Из…
вертикальная карусель отсекает изображения
В настоящее время я стремлюсь реализовать вертикальную карусель, чтобы пользователи могли перемещаться по галерее thumbanils, карусель предназначена для отображения 3 элементов за клик, однако она…
jCarousel анимировать карусель с jQuery
Привет, я использую jCarousel. Можно ли оживить карусель самостоятельно. Так, например, я мог бы создать кнопку и прикрепить к ней обработчик jQuery, чтобы, когда кнопка была нажата, она переместила…
jQuery бесшовная карусель
Мне нужен плагин jQuery для бесконечной карусели, который бесшовный и указывает местоположение. Я попробовал CorouFredSel, но после скольжения на другой слайд эта карусель создает пустое…
jquery div карусель
Мне интересно, как я создаю карусель jQuery, где я могу просматривать divs, а не изображения. Поэтому я хочу просмотреть изображение с некоторым текстом описания. Разве это возможно? И как это…
jQuery Карусель Застряла (Twitter Бутстрап)
Я реализовал плагин Twitter Bootstrap Carousel jQuery здесь: http://zarin.me/circlefive/dashboard.html (см. вкладку ответы ) Карусель обычно функционирует, но иногда застревает. Это особенно…
Вертикальная крошечная карусель автозапуск по горизонтали
Я использую крошечную карусель для моего текущего школьного проекта. все работает нормально, за исключением автозапуска. Вот код для автозапуска и анимации конфигурации: $(#upcoming).tinycarousel({…
jQuery карусель с пейджером в Drupal
Я ищу хорошую карусель jQuery для Drupal. Требования : он должен иметь пейджер (мини-навигация, где люди могут выбрать, какой слайд они хотят видеть) совместимость с Drupal 6 совместимость с jQuery…
jQuery Круговая Карусель Содержимого Автопрокрутка
Я нашел классный карусельный сценарий под названием Circular Content Carousel by Tympanus . Это почти именно то, что мне нужно. При нажатии на ссылку more соответствующий элемент перемещается…
Слайдеры и карусели
Слайдер для смены двух фотографий
Пример создания слайдера «До» и «После» с диагональным разделением фотографий
Еще один вариант слайдера «До» и «После», который также может подойти для фонового эффекта секции.
Читать далее3D карусель Cloud 9 Carousel
jQuery/Zepto плагин Cloud 9 Carousel для создания 3D карусели изображений или блоков
Ранее уже была заметка 3D карусель изображений про похожий слайдер, но Cloud 9 Carousel имеет гораздо больше настроек и возможностей.
Читать далееПерелистывание изображений при скроллинге
Красивый эффект смены изображений колесом прокрутки мыши на WebGL
Данный слайдер не имеет стрелок и точек, а перелистывание фотографий происходит при скроллинге страницы.
Работает он на библиотеках TweenMax и three.js
Читать далееСлайдер «До» и «После»
Скрипт на jQuery и jQuery UI для смены одной фотографии на другую
Данный слайдер накладывает две фотографии друг на друга и заменяет их движением мыши.
Читать далееГоризонтальный таймлайн
Горизонтальный слайдер шкалы времени на jQuery
Плагин «horizontal-timeline«, описанный в данной заметке имеет версию 1.0 и использует библиотеку jQuery. Более новую его версию 2.0 на чистом JS, можно скачать тут или у авторов.
Читать далееАнимированный эффект смены фотографий на JS
Красивая смена фоновых изображений по клику с использованием WebGL
Скрипт, реализующий данную анимацию, работает на библиотеке curtains.js
Читать далееГармошка из фотографий на jQuery
Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий
Автор назвал данный плагин слайдером, но мне он больше напоминает горизонтальный аккордеон.
Читать далееРазделенные изображения
Скрипт splitpic.js для смены мышкой одной фотографии на другую
Оригинальный эффект, позволяющий менять мышкой одну фотографию на другую по горизонтали или вертикали. Хорошо подойдет для показа изображений ДО и ПОСЛЕ или других парных картинок
Читать далееСлайдер фоновых изображений Vegas
jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры
VEGAS BACKGROUND SLIDESHOW — это плагин jQuery или Zepto для анимации фоновых изображений блоков или всей страницы. Он имеет массу настроек и эффектов анимации.
В этой заметке рассмотрим его поподробнее.
Читать далееПростая карусель на 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.
Читайте также
blogprogram.ru | 2016-05-11 | Простая карусель на JQuery для любого сайта с автопрокруткой и подписями | Если вам необходима обычная карусель, которая бы пролистывала изображения с подписями, то данный вариант карусели вам подойдет как никогда. Сразу о | http://blogprogram.ru/wp-content/uploads/2016/05/screen-131×131.png