В интернете можно встретить множество великолепных плагинов для создания jQuery каруселей и слайдеров. Они позволяют реализовать динамический скроллинг с дополнительными эффектами.
Это один из популярнейших трендов в веб-дизайне за последние несколько лет. Кроме этого использование готовых библиотек и jQuery-плагинов позволяет существенно сэкономить время. Все что нужно, это указать ссылку на JavaScript и CSS-файлы , а затем применить эффект к нужным HTML-элементам .
Также можно установить собственные настройки и CSS-стили . Сегодняшняя статья направлена на то, чтобы познакомить вас адаптивными jQuery-плагинами для создания каруселей и слайдеров.
Distractful – jQuery-плагин для создания сенсорного полноэкранного слайдера контента
Адаптивный полноэкранный слайдер карусель jQuery контента с поддержкой сенсорных экранов. Плагин распространяется под лицензионным соглашением GNU GENERAL PUBLIC LICENSE v3 :
Neoslide: простенький и расширяемый плагин jQuery-карусели
Простой и расширяемый jQuery-плагин , который позволит вам использовать полностью настраиваемый слайдер на любой веб-странице:
Hslider: плагин адаптивной галереи изображений на всю ширину страницы
Еще один плагин для демонстрации изображений при помощи адаптивной карусели jQuery с элементами управления и настраиваемой длительностью задержки:
Carousel 3D: плагин jQuery-карусели с трехмерными эффектами вращения
Sleek Slider: адаптивная jQuery-карусель на весь экран
Миниатюрная и привлекательная jQuery-карусель для демонстрации контента и изображений с различными видами навигации (SVG-стрелки с миниатюрами изображений, элементы пагинации или вкладки ):
PaW Carousel: адаптивная карусель на базе jQuery
PaW Carousel (v2) представляет собой миниатюрный плагин для создания адаптивных, простых каруселей jQuery с выводом миниатюр изображений:
Carousel Sharer: jQuery-карусель для репостов в социальные сети
Carousel Sharer – это jQuery-плагин , который позволяет демонстрировать несколько товаров в ряд, и дает возможность посетителям делиться вашими товарами в Facebook , Twitter , Google+ и Pinterest :
Simply Carousel: минималистичная адаптивная карусель изображений
Simply Carousel представляет собой миниатюрный и быстрый jQuery-плагин , который позволяет создавать гибкие адаптивные слайдеры и карусели изображений:
Slides: адаптивная jQuery-карусель и слайд-шоу с поддержкой сенсорных устройств
Slides – миниатюрный jQuery-плагин для создания адаптивных каруселей для сайта jQuery с миниатюрами, стрелочной навигацией и возможностью использовать собственные элементы управления. Реализована поддержка сенсорных экранов:
Карусель для контента на jQuery
Простая адаптивная jQuery-карусель с функциями автоматического воспроизведения, элементами управления и даже callback-функциями :
Slick: адаптивная и гибкая jQuery-карусель
Slick представляет собой «свежий » плагин для создания настраиваемых, адаптивных и оптимизированных под мобильные устройства jQuery каруселей и слайдеров, способных работать с любыми HTML-элементами :
bxSlider: слайдер HTML-контента на jQuery
bxSlider – один из лучших jQuery-слайдеров контента, доступных на сегодняшний день. Этот плагин отлично подойдет для организации слайд-шоу:
CarouFredSel: гибкий и мощный плагин jQuery-карусели
jQuery.carouFredSel представляет собой плагин, который превращает любой HTML-элемент в карусель контента. В нем можно прокручивать один или несколько элементов одновременно как горизонтально, так и вертикально. Также можно включить автоматическое воспроизведение и сделать прокрутку бесконечной:
Циклическая карусель контента на jQuery
Карусель, в которой каждый клик будет раскрывать новый блок контента. Нажатие по крестику приведет к закрытию активного блока и вернет нас на исходную позицию просмотра миниатюр:
Cloud Carousel: 3D-карусель на Javascript
Эта карусель позволяет создать реалистичную перспективу. Многие 3D карусели jQuery применяют эффект перспективы лишь к размеру изображения, а не к его расположению, что приводит к диспропорции элементов на странице:
Elastislide: адаптивная карусель на jQuery
Elastislide представляет собой адаптивную jQuery-карусель , которая подстраивается под экраны любого размера. Вставка карусели в контейнер с гибкой шириной сделает «резиновой » и саму карусель:
jCarousel Lite
С помощью этого плагина вы сможете просматривать изображения или HTML-элементы в виде слайдера. Он весит всего 2Кб, но при этом позволяет использовать собственные настройки:
3D Carousel
Создайте 3D карусель jQuery из изображений с эффектами тени и анимацией, реагирующей на положение курсора:
Плагин JQuery carousel
Настройки этого плагина позволяют определить, сколько элементов будет отображено в карусели, после чего плагин адаптирует ее под нужную ширину:
Вращающийся слайдер изображений на jQuery
Ассиметричный слайдер изображений с небольшим дополнением: при прокрутке изображений они слегка поворачиваются. За счет небольшого смещения элементов слайдер приобретает необычную форму:
JQuery Feature Carousel
Этот плагин предназначен для отображения рекомендованных статей на главной странице, но его также можно использовать для любого другого контента. Он позволяет одновременно показывать до трех изображений, в то время как остальные элементы jQuery карусели контента скрыты:
jQuery Infinite Carousel
Представляет собой jQuery-плагин , который позволяет демонстрировать неограниченное количество изображений и видеороликов в карусели. В отличие от остальных каруселей, Infinite Carousel показывает элементы бесконечным циклом без необходимости пользоваться навигацией:
jQuery-плагин Liquid Carousel
Liquid Carousel представляет собой плагин, предназначенный для создания «текучих » дизайнов. Каждый раз, когда контейнер адаптивной карусели jQuery изменяется в размере, количество отображаемых элементов подстраивается под новую ширину:
Jquery MS Carousel
1. jQuery карусель «clickCarousel»Блок с прокруткой анонсов новостей. Для прокрутки блоков используются стрелки влево/вправо. В архиве карусель в двух стилевых оформлениях: светлом и темном.
1. jQuery карусель, плагин «carouFredSel»Аккуратная свежая карусель изображений на jQuery.
4. jQuery плагин: карусель «Elastislide» 5. Плагин «TinyCarousel»Отличные слайдеры контента в виде карусели изображений с применением jQuery. На демонстрационной странице описано, как прикрутить эту карусель к своему сайту.
Плагин «Slider Kit», легкая карусель с различными способами прокрутки.
7. javascript карусель 8. jQuery плагин «Grid Navigation Effects»Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом 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»Плагин для реализации горизонтальной прокрутки содержимого в определенной области. При наведении курсора мыши на левый или правый край области, начинается прокручивание.
Навигация между слайдами с контентом может осуществляться с помощью стрелок или по нажатию на миниатюру. Снизу есть кнопка «Show», позволяющая скрыть/показать миниатюры или полное описание слайда.
15. Ротатор контента «Circular Content Carousel» 17. СкроллерБлок со скроллером, появляющимся при наведении курсора. Прокручивать содержимое можно как с помощью полосы прокрутки, так и с помощью колеса мыши.
Подобное jQuery решение было сделано под впечатлением от подобного эффекта на сайте Apple . Разработчики этой корпорации всегда находили интересные решения, которыми вдохновлялись веб-мастера со всего мира. Для демонстрации плагина выберите из какую-нибудь категорию из списка.
19. Потрясающий слайдерСлайдер генерируется автоматически. Данные с названием товара, описанием, ссылкой и адресом изображения берутся из файла slider.db.txt. Используемые технологии: CSS, PHP, jQuery.
20. Ротация блоков c использованием jQueryДля того, чтобы просмотреть эффект ротации блоков, нажмите на один из маленьких прямоугольников на демонстрационной странице
Плагин для прокрутки контента, например, можно использовать для показа последних новостей или для показа Twitter летны на сайте.
22. Динамический блок «Отзывы клиентов»Автоматическая ротация содержимого блока. Используемые технологии: PHP, XML, CSS, jQuery.
Этот плагин прообразовывает пункты списка (ul li) в элементы jQuery карусели.
26. javascript карусель «ImageFlow»Изображения легко прокручивать с помощью колеса мыши.
27. Прокручивание контентаКомпактный блок с анонсом последних материалов на сайте или новостей. В левой колонке отображается разбитый на страницы список из кратких анонсов последних новостей. При выборе одного из них в правой колонке отображается более подробное описание и ссылка на прочтение полного текста публикации. Реализовано с помощью jQuery.
Скролируются изображения со ссылками, при наведении мышки прокручивание останавливается и появляется панель навигации. При наведении мышки на картинку отображается также ее название между кнопками управления. Очень красиво смотрится на странице
33. Прокрутка содержимого, Mootools плагин «Scrollbar»Прокручивание осуществляется как при помощи полосы прокрутки, так и с помощью колеса мыши.
Плагины jQuery -каруселей позволяют отображать содержимое веб-сайтов в более привлекательном виде. С помощью таких плагинов можно создавать красивые презентации прямо на страницах сайтов, и привлекать внимание посетителей.
1. Bootstrap Ambilight SliderBootstrap Ambilight Slider – плагин для создания слайдеров/каруселей с эффектом окружающего свечения и функционалом Bootstrap.
2. jQuery TouchSwipe Carousel
jQuery -плагин TouchSwipe Carousel позволяет определять прикосновения к сенсорному экрану и имитировать нажатие клавиши мыши.
3. ItemSlide
ItemSlide.js представляет собой jquery -плагин для создания карусели, которая будет работать как на настольных ПК, так и на мобильных сенсорных устройствах.
4.
– jquery -плагин для создания адаптивных каруселей/слайдеров.
5.
Полностью адаптивный и оптимизированный под мобильные устройства плагин jquery -каруселей. Для анимации здесь используются CSS3 -переходы, но также предусмотрен запасной вариант наjQuery . Плагин поддерживает неограниченное количество слайдов с любым типом контента. умеет взаимодействовать с клавиатурой, и при этом хорошо работает в большинстве браузеров, в том числе и мобильных.
6. SilverTrack
SilverTrack – jQuery -плагин с возможностью расширения. Состоит из небольшого ядра, к которому на выбор можно подключать удобные плагины.
7. Owl Carousel 2
Owl Carousel 2 – полностью адаптивная карусель для jQuery/Zepto с поддержкой сенсорных экранов.
8. UtilCarousel
UtilCarousel – плагин jQuery -карусели с плавными переходами, реализованными за счет аппаратного ускорения. Он полностью адаптивен. Плагин поддерживает сенсорные экраны, и в нем используется трехмерная CSS3 -анимация с аппаратным ускорением. Благодаря этому плагин будет хорошо смотреться как на настольных ПК, так и на мобильных устройствах. Управлять UtilCarousel можно при помощи касаний, навигации или колесика мыши.
9. Slick
Slick представляет собой адаптивную jQuery -карусель, в которой есть все, что может понадобиться.
10. CodingJack 3D Carousel
Эта карусель поддерживается устройствами на iOS и Android и оснащена функционалом сенсорного перелистывания. Отлично смотрится на планшетах и смартфонах.
11. jQuery Slideshow
jQuery Slideshow представляет собой карусель и слайдер с поддержкой управления жестами на сенсорных устройствах. Архив плагина весит всего 2 килобайта.
12. FlimRoll
FlimRoll – миниатюрная jQuery -карусель, которая фокусирует внимание пользователя на определенном объекте, располагая его в центре экрана.
13. Tikslus
Tikslus представляет собой полностью адаптивную карусель на jQuery с множеством функций и свойств. А высокая адаптивность плагина позволяет не указывать размеры изображений. Кроме того, стоит отметить поддержку произвольной анимации, основанной на CSS3 -классах. Tikslus можно использовать с плагиномJquery Mobile .
14. Scrollbox
Scrollbox – простой, миниатюрный jQuery -плагин, который превращает списки в карусель или бегущую строку.
15. Sky Touch Carousel
Sky Touch Carousel - плагин jQuery -карусели с богатым набором функций. Плагин адаптивен, поддерживает сенсорные экраны, и при этом работает быстро и плавно. Настройки позволяют изменять внешний вид карусели с помощью CSS .
16.
– гибкий jQuery -плагин для создания слайд-шоу или каруселей. Он имеет множество настроек, включая типы переходов, выравнивание изображений, и скорость переключения кадров.
Одним из эффективных способов привлечения внимания пользователей на странице сайта это создание движущейся анимации. Элементы анимации помогают более наглядно рассказать и показать пользователям о вашем продукте. Последнее время большую популярность получили выезжающие панели, а также ряд других эффектов, которые появляются при прокрутке или нажатии на картинку. Они также известны как слайдеры, карусели и выезжающие панели. В данной статье речь пойдет о создании адаптивного слайдера карусельного типа, с плавным эффектом автопрокрутки.
На сегодняшний день в сети представлено сотни обзоров с ссылками на готовые решения, однако большинство из них содержат множество неиспользуемых функций, которые значительно понижают работоспособность слайдера, также как и замедляют загрузку сайта в целом. Профессиональные веб-разработчики всегда стремились создавать гибкие в настройке программные продукты, с низким порогом вхождения дополнительных библиотек и плагинов. Именно поэтому в работе нашего скрипта задействованы минимальные требования для организации такого слайдера. Функционал работы позволяет задавать интервал переключения, скорость, а также выбор определнного слайда. Ниже приведен ряд перменных, регулирующих работу самого слайдера.
timeList - скорость переключения слайда
TimeView - время показа
RadioBut - кнопки под слайдом, для быстрой навигации. По умолчанию значение true, если использовать false, то кнопки пропадут.
А теперь давайте приступим! Создадим и откроем файл index.htm
В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение и выравнивает слайдер по середине экрана. Параметр active-slide задает размер и высоту картинки согласно ее длине. И slider показывает только активную картинку.
Теперь создадим и откроем файл style.css и пропишем туда нужную нам разметку:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body { color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; } #slider-wrap{ max-width:800px; margin: 0 auto; margin-top: 80px; } #active-slide { width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #slider{ position: relative; width: calc(100% * 4); top: 0; left: 0; margin: 0; padding: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .slide{ width: calc(100%/4); list-style: none; display: inline; float: left; } .slide img { width:100%; } .Radio-But{ margin-top:10px; text-align:center; } .Radio-But .ctrl-select { margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat; } .Radio-But .ctrl-select:hover { cursor:pointer; background-position:center center; } .Radio-But .ctrl-select.active { background-position:center top; } #prewbutton, #nextbutton { display:block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") left center no-repeat; opacity:0.5; z-index:3; outline:none !important; } #prewbutton { left:10px; } #nextbutton { right:10px; background:url(arrowBg.png) right center no-repeat; } #prewbutton:hover, #nextbutton:hover { opacity:1; }
В свойстве стиля slider-wrap пропишите width – максимальную длину ваших картинок.
В свойстве стиля #slider { width: calc(100% * 4); } и .slide { width: calc(100%/4); } укажите количество картинок в вашем слайдере. В нашем примере их 4.
Если стрелки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми и появляться они будут при наведении. Для этого в параметрах prewBut и nextBut , задайте свойству opacity значение 0.
Теперь создадим и откроем наш файл slider.js , в котором и будет код слайдера. Не забудьте подключить библиотеку jQuery.
$(document).ready(function () { var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow){ clearTimeout(slideTime); if(arrow == "next"){ if(slideNum == slideCount) { slideNum=1; } else{slideNum++} translateWidth = -$("#active-slide").width() * (slideNum - 1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); } else if(arrow == "prew") { if(slideNum == 1) { slideNum=slideCount; } else{slideNum-=1} translateWidth = -$("#active-slide").width() * (slideNum - 1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); }else{ slideNum = arrow; translateWidth = -$("#active-slide").width() * (slideNum -1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); } if(RadioBut){ var $linkArrow = $("") .prependTo("#active-slide"); $("#nextbutton").click(function(){ animSlide("next"); return false; }) $("#prewbutton").click(function(){ animSlide("prew"); return false; }) } var adderSpan = ""; $(".slide").each(function(index) { adderSpan += "" + index + ""; }); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, TimeView);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); var clicking = false; var prevX; $(".slide").mousedown(function(e){ clicking = true; prevX = e.clientX; }); $(".slide").mouseup(function() { clicking = false; }); $(document).mouseup(function(){ clicking = false; }); $(".slide").mousemove(function(e){ if(clicking == true) { if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); } clicking = false; } }); $(".slide").hover().css("cursor", "pointer"); rotator(); });
Функция animSlide принимает три вида значений: next, prew, числовое значение. Параметр next переключает следующий слайд, prew возвращает предыдущий, а числовое значение это определенно заданный слайд, выбранный через радио кнопки под слайдом.
В представленном слайдере использовались картинки с веб-ресурса https://pixabay.com/.
Да, тема давольно-таки заезженная. Но все же, найти то, что действительно нужно, зачастую сложно. Все предлагают сильно навороченные скрипты, с множеством лишнего функционала. И обычно это уже сжатые плагины.
Поэтому я предложу свой альтернативный вариант совсем простой карусели на jQuery.
Она может использоваться как карусель изображений, так и карусель новостей или любого другого контента =)
Единственный небольшой наворот, что я себе позволил - это тень у блока карусели.
UPD: 6.07.2014
Выглядеть оно будет примерно так:
ДЕМО
Скачать
Структура примет следующий вид:
TJ simple adaptive carusel
Опишем стили:
Carousel { max-width: 1080px; /* ширина всего блока */ margin: 50px auto; width:100%; } .carousel-wrapper { margin: 10px 30px; /* отступы для стрелок */ overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */ position:relative; } .carousel-items { width: 10000px; /* устанавливаем большую ширину для набора элементов */ position: relative; /* позиционируем блок относительно основной области карусели */ } .carousel-block { float: left; /* выстраиваем все элементы карусели в ряд */ width: 250px; /* задаём ширину каждого элемента */ padding: 10px 10px 10px 0px; /* делаем оступы, чтобы элементы не сливались */ } .carousel-block img{ display:block; } /*********** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a{ width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration:none; } .carousel-button-left a{ float: left; background: url(../images/carousel-left.png); } .carousel-button-right a{ float: right; background: url(../images/carousel-right.png); } /*********** SHADOW ***********/ .shadow{ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); }
И, наконец, как оно должно работать:
//Обработка клика на стрелку вправо $(document).on("click", ".carousel-button-right",function(){ var carusel = $(this).parents(".carousel"); right_carusel(carusel); return false; }); //Обработка клика на стрелку влево $(document).on("click",".carousel-button-left",function(){ var carusel = $(this).parents(".carousel"); left_carusel(carusel); return false; }); function left_carusel(carusel){ var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"}); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items").animate({left: "0px"}, 200); } function right_carusel(carusel){ var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){ $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); $(carusel).find(".carousel-items").css({"left":"0px"}); }); } $(function() { //Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели auto_right(".carousel:first"); }) // Автоматическая прокрутка function auto_right(carusel){ setInterval(function(){ if (!$(carusel).is(".hover")) right_carusel(carusel); }, 3000) } // Навели курсор на карусель $(document).on("mouseenter", ".carousel", function(){$(this).addClass("hover")}) //Убрали курсор с карусели $(document).on("mouseleave", ".carousel", function(){$(this).removeClass("hover")})
Соответственно, тенюшку можно убрать. А для применения нужно всего лишь в css заменить размер основного блока и вложенных "скроллящихся" блоков. Так же очень легко зациклить этот процесс, дабы он скроллился автоматически (в данном случае, достаточно раскомментировать вызов функции auto_right). То есть сделать из этой простенькой галереи можно все, что нужно в рамках поставленной задачи!
Также следует отметить, при приведенный пример является адаптивным, то есть размер карусели адаптируется в соответствии с размерами экрана и будет коррекно отображаться как на экране компьютера или ноутбука, так и на экранах планшетов и смартфонов.
