Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.
В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.
Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?
Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).
Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.
Здесь содержание слайда 1 Здесь содержание слайда 2 Здесь содержание слайда 3
Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.
#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; 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", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов (.slide).
И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.
Селектор.sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем.sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.
Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.
Давайте теперь рассмотрим сам сценарий:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) { $(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $(".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $(".slide").eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); } if(hwNeedLinks){ var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function(){ animSlide("next"); }) $("#prewbutton").click(function(){ animSlide("prew"); }) } var $adderSpan = ""; $(".slide").each(function(index) { $adderSpan += "" + index + ""; }); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, hwTimeOut);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); });
Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).
Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода.css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все.hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.
Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.
Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.
Обратите внимание, что методу.fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.
Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода.hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().
Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом.slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:
0 1 2 3
Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.
В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):
0
1
2
3
Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.
На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (). Есть два варианта доработки. Либо обернуть весь js код:
(function ($) { // Весь ваш код... })(jQuery);
или заменить символы $ во всём скрипте на jQuery. Вот так:
JQuery(document).ready(function(e) { jQuery(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow){ // и т. д.
В примере уже реализован первый метод.
Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!
Добавлено: Это ещё не всё. Читайте . Там мы добавим новые возможности к данному скрипту.
Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов, особенно большой популярностью пользуется адаптивный дизайн. И в связи с этим появилось не мало новых адаптивных jquery слайдеров
, галерей, каруселей или подобных плагинов.
1. Responsive Horizontal Posts Slider
Адаптивная горизонтальная карусель с детальной инструкцией по установке. Выполнена она в простом стиле, но вы можете ее стилизовать под себя.
2. Слайдер на Glide.js
Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.
3. Tilted Content Slideshow
Адаптивный слайдер с контентом. Изюминкой данного слайдера является 3d эффект изображений, а также разные анимации появления в случайном порядке.
4. Слайдер с использованием HTML5 canvas
Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,
5. Слайдер «Морфинг изображений»
Слайдер с эффектом морфинга (Плавная трансформация из одного объекта к другому). В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.
6. Круговой слайдер
Слайдер в виде круга с эффектом переворота изображения.
7. Слайдер с размытым фоном
Адаптивный слайдер с переключением и размытием заднего фона.
8. Адаптивный фэшн слайдер
Простой, легкий и адаптивный слайдер для сайта.
9. Slicebox - jQuery 3D image slider (ОБНОВЛЕННЫЙ)
Обновленная версия Slicebox slider с исправлениями и новыми возможностями.
10.Free Animated Responsive Image Grid
Плагин JQuery для создания гибкой сетки изображения, который будет переключать снимки, используя различные анимации и тайминги. Это может хорошо смотреться в качестве фона или декоративного элемента на сайте, так как мы можем настроить выборочное появление новых изображений и их переходов. Плагин выполнен в нескольких вариантах.
11. Flexslider
Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.
12. Фоторама
Fotorama - это универсальный плагин. У него есть много настроек, все работает быстро и легко, есть возможность просмотра слайдов на весь экран. Слайдер можно использовать как в фиксированном размере так и адаптивном, с миниатюрами и без, с круговой прокруткой и без и еще много чего.
P.S. Ставил слайдер несколько раз и считаю что он один из лучших
13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.
Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.
14. Слайдер на css3
Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.
15. WOW Slider
WOW Slider - это слайдер изображений с потрясающими визуальными эффектами.
17. Elastic
Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.
18. Slit
Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах. анимация сделана достаточно необычно и красиво.
19. Адаптивная фотогалерея plus
Простой бесплатный слайдер-галерея с подгрузкой изображений.
20. Адаптивный слайдер для WordPress
Адаптивный бесплатный слайдер для WP.
21. Parallax Content Slider
Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.
22. Слайдер с привязкой музыки
Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.
23. Слайдер с jmpress.js
Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.
24. Fast Hover Slideshow
Слайд шоу с быстрым переключением слайдов. Слайды переключаются при наведении курсора.
25. Image Accordion with CSS3
Аккордеон изображений с помощью css3.
26. A Touch Optimized Gallery Plugin
Это адаптивная галерея которая оптимизирована для тач-устройств.
27. 3D Галерея
3D Wall Gallery - создана для браузера Safari, где будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.
28. Слайдер с пагинацией
Адаптивный слайдер с нумерацией страниц с помощью ползунка JQuery UI. идея состоит в том чтобы чтобы использовать простую концепцию навигации. Есть возможность перемотки всех изображений или послайдового переключения.
29.Image Montage with jQuery
Автоматическое расположение изображений в зависимости от ширины экрана. Очень полезная штука при разработке сайта портфолио.
30. 3D Gallery
Простенький 3D круговой слайдер на css3 и jQuery.
31. Полноэкранный режим с 3D эффектом на css3 и jQuery
Слайдер с возможностью полно-экранного просмотра изображений с красивым переходом.
Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!
Какие виды слайдеров бывают и где они могут понадобится?Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.
Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.
В основном заказчики просят внедрять на галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. такой механизм прозвали из-за того, что показ картинок повторяется по кругу.
На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.
Самостоятельная деятельностьНу а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый . Это будет автоматический переключатель картинок по кругу.
Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }
Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.
Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись
document.querySelectorAll ("#slides .slide")
Таким образом, в MySlider хранится коллекция из четырех элементов.
Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .
Переходим к самой функции.
Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.
Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально:
А вот теперь полученному элементу присваиваю описание классов «slide showing ». Как видите, все реализуется проще простого.
Спасибо за внимание. Не забывайте вступать в группу моих подписчиков, читать новые статьи и конечно же делиться ссылками на понравившиеся публикации с друзьями. Желаю удачи в изучении JavaScript. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 256 раз
Адаптивный, или если хотите, отзывчивый веб-дизайн сейчас не просто очередной дизайнерский тренд, это уже некий стандарт разработки сайтов, обеспечивающий универсальность веб-сайтов, гармоничное визуальное восприятие на экранах различных пользовательских устройств. Ещё совсем недавно, при разработке адаптивного шаблона, мне приходилось сталкиваться с различными трудностями интеграции тех или иных слайдеров и галерей изображений, не нарушая общий дизайнерский стиль. Сейчас всё намного проще, в сети существует огромное количество готовых решений и что особенно радует, большинство из них в свободном доступе, с открытым исходным кодом.
По причине многообразия предлагаемых инструментов, я составил небольшой обзор наиболее заметных разработок адаптивных jQuery слайдеров изображений, появившихся в самое последнее время и распространяемых без каких-либо ограничений, т.е. абсолютно бесплатно.
WOW SliderАдаптивный jQuery слайдер изображений с великолепным набором визуальных эффектов (повороты, вылеты, размытие, спирали, жалюзи и т.д...) и множеством готовых шаблонов. С помощью встроенного в WOW Slider мастера вставки на страницу, вы сможете легко и непринужденно создавать потрясающие слайд-шоу за считанные минуты. На сайте разработчика присутствует вся необходимая документация по настройке и использованию плагина на Русском языке, отличные живые примеры работы плагина. Также доступны для скачивания отдельный плагин Wordpress и модуль для Joomla. Уверен, что многим понравится этот замечательный слайдер, как новичкам, так и поднаторевшим веб-мастеровым.
HiSliderHiSlider — HTML5, Jquery слайдер и галерея изображений, абсолютно бесплатный плагин для личного пользования на сайтах под управлением популярных систем — WordPress, Joomla, Drupal. С помощью этого простого, но довольно функционального инструмента, вы сможете без особого труда создавать на страницах своих сайтов, удивительные и яркие слайд-шоу, эффектные презентации и анонсы новых сообщений. Несколько готовых шаблонов и скинов для слайдера, потрясающие эффекты перехода(смены) содержания, вывод различного мультимедийного контента: , видео с YouTube и Vimeo, гибкие пользовательские настройки и т.д...
Nivo Slider — старый-добрый, хорошо известный всем кто в теме, один из самых красивых и простых в использовании слайдер изображений. Плагин JQuery Nivo Slider является бесплатным для загрузки и дальнейшего использования, распространяется под лицензией MIT. Так же имеется отдельный плагин для WordPress, но к сожалению уже платный и отвалить за него придется 29$ за одну лицензию. Лучше всё же немного поколдовать с файлами темы WP и прикрутить свободную jQuery версию плагина Nivo Slider к своему блогу, благо инфы как это сделать в сети достаточно.
Что касается функционала, с этим всё в полном порядке. Для работы используется библиотека jQuery v1.7+, красивые эффекты переходов, простые и очень гибкие настройки, адаптивный макет, автоматическая обрезка изображения и многое другое.
Идея слайдера была навеяна разработчикам, хорошо известным всем стилем представления продукции Apple, где несколько небольших предметов(картинок) меняются по клику на выбранную категорию с простеньким эффектом анимации. Codrops представляет в ваше распоряжение подробнейший урок по созданию этого слайдера, полный расклад Html-разметки, набор правил CSS и исполняемый jQuery плагин, а так же замечательный живой пример использования слайдера.
Полноэкранный слайдер изображений на JQuery и CSS3 + подробный учебник по интеграции плагина на страницы сайта. Идея заключается в том, чтобы нарезать открытый текущий слайд с определенным контентом при переходе к следующему или предыдущему содержанию. С помощью JQuery и CSS анимации вы сможете создавать уникальные переходы между слайдами. Адаптивный макет слайдера гарантирует, что он будет одинаково хорошо смотреться на экранах различных типах пользовательских устройств.
Слайдер содержания, который автоматом регулируется по ширине и высоте в зависимости от размеров родительского контейнера, в котором расположен. Довольно простой в исполнении и гибкий в настройках слайдер работающий на JQuery, с навигацией в нижней части, при изменении размера экрана в сторону уменьшения, навигация выводится в виде иконок. Очень подробная документация(урок по созданию) и живые примеры использования.
Экспериментальный вариант слайдера, который демонстрирует изображения с переходами из плоскости 3D. Изображения разбиты на две горизонтальные стопки, с помощью стрелок навигации осуществляется смена и переход каждой последующей картинки в состояние просмотра. В общем ничего особенного, но сама идея и техника исполнения довольно интересны.
Очень простой, 100% адаптивный и полноэкранный jQuery слайдер изображений. Работа слайдера основана на CSS переходах(свойство transition) в связке с магией jQuery. Значение max-width по умолчанию установлено на 100%, по-этому размер картинок будет изменяться в зависимости от изменений размеров экрана. Ни каких особых анимационных эффектов и изысков в оформлении, всё просто, и заточено на бесперебойную работу.
Название говорит само за себя, это пожалуй один из самых легковесных и минималистичных jQuery слайдеров изображений, которые мне встречались(плагин в 1kb). ResponsiveSlides.js -крошечный плагин JQuery, который создает слайд-шоу, используя элементы внутри контейнера. Работает с широким диапазоном браузеров, включая все версии IE — знаменитого тормоза прогресса, от IE6 и выше. В работе используются CSS3 переходы в связке с javascript, для надёжности. Простая разметка с использованием неупорядоченного списка, настройка переходов и временных интервалов, автоматическое и ручное управление переключением слайдов, а так же поддержка сразу нескольких слайд-шоу. Вот такой вот резвый «малыш».
Camera — бесплатный JQuery плагин для организации слайд-шоу на страницах сайтов, легкий слайдер с множеством эффектов переходов, с 100% адаптивным макетом, и очень простыми настройками. Замечательно впишется на экраны любых пользовательских устройств(мониторы ПК, планшеты, смартфоны и мобильные телефоны). Возможность демонстрации встроенного видео. Автоматическая смена слайдов и ручное управление с помощью кнопок и блока миниатюр изображений. Практически полноценная галерея картинок в компактном исполнении.
Ещё один, довольно простой адаптивный слайдер на jQuery. В слайдах можно размещать любой контент, видео, изображения, текст и другие элементы. Расширенная поддержка сенсорных экранов. Использование CSS-анимации переходов. Большое количество различных вариаций представления слайд-шоу и компактных галерей изображений. Автоматическое и ручное управление. Переключение слайдов с помощью кнопок и посредством выбора миниатюр. Небольшой размер исходного файла, очень прост в настройках и реализации.
FlexSlider 2 — Обновленная версия одноименного слайдера, с улучшенной скоростью реагирования, минификацией скрипта, и сведением к минимуму перекомпоновки/перерисовки. Плагин включает в себя базовый слайдер, контроль управления слайдами с помощью миниатюр, встроенных стрелок влево-вправо и нижней панели навигации в виде кнопок. Возможность вывода в слайдах видео(vimeo), гибкие настройки параметров(переходы, оформление, временной интервал), полностью адаптивный макет.
Хорошо известный и довольно популярный, адаптивный плагин jQuery для создания высококачественных галерей и слайдеров изображений. Интерфейс слайдера, благодаря его панели управления визуально напоминает привычный видеоплеер, в состав плагина входит несколько разных тем оформления. Поддержка встроенного видео и изображений с популярных сервисов: Flickr, Vimeo, YouTube и других. Подробная документация по настройке и использованию.
Простой без наворотов бесплатный JQuery слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry является экспериментальным JQuery плагином с открытым исходным кодом. Минималистичный дизайн, никаких эффектов, только плавно всплывающие картинки сменяющие друг друга через определенный промежуток времени. Всё очень просто, поставил, подключил и вперёд...
Очень компактный jQuery слайдер изображений с элементами Lightbox. Благодаря своим гибким размерам, очень просто встраивается в любой контейнер, в одиночную запись в виде миниатюр, при наведении курсора мыши или клике на которые, активируется лайтбокс с увеличенной картинкой и элементами управления. Удобно размещать такой слайдер в боковых панелях, для представления продуктов или анонсов новостей. Отличное решение для сайтов с большим объёмом информации.
Бесплатный адаптивный слайдер с расширенными CSS3 переходами. Минималистичный стиль, 3 темы оформления, Каждый кадр скользит в горизонтальном направлении появляясь в центре картинка уходит влево, подпись вправо, миниатюры дублируются в нижнем правом углу. Разбиение на страницы представления продуктов для просмотра в каждом кадре. Управление так же включает кнопки назад и вперед. Поддержка всеми современными браузерами.
Совсем уж простецкий слайдер картинок и по функционалу и по настройкам, из настроек присутствует изменение скорости смены слайдов, подключение ручного режима(активируются кнопки управления), непрерывный показ слайдов. Данный слайдер имеет право быть и меня он привлек лишь тем, что он есть, для себя ничего особо интересного в этой разработке не нашёл, может плохо искал)))
Красивый такой, адаптивный слайдер изображений от Владимира Кудинова сотоварищи. Добротный, качественно проработанный инструмент, предоставляется с наглядными примерами и подробнейшей инструкцией по созданию, установке и использованию. Адаптивный дизайн, симпатичные кнопки и стрелочки зеленого цвета, всё довольно мило и спокойно, без напора.
Бесплатный JQuery слайдер плагин с эффектом параллакса для изображений и текст-слайдов. Анимация слайдов имеет несколько значений показа с полным контролем в каждом параметре времени и анимации. Возможность анимации сразу нескольких элементов на слайде. Вы можете установить различные методы анимации, исчезновение слайдов или переходы из определенного направления. Автоматический показ и ручное управление с помощью стрелок навигации всплывающих при наведении на картинку. 10 видов эффектов анимации появления слайдов и многое другое...
Обзор получился довольно обширным, но недостаточно информативным из-за большого количества рассматриваемых продуктов. Все подробности и детальные описания функциональных возможностей того или иного плагина, вы сможете узнать непосредственно на страницах разработчиков. Мне же остаётся надеяться, что кому-нибудь да и облегчил поиски того самого нужного инструмента, для создания красочных слайдеров картинок на страницах своих сайтов.
С уважением, Андрей
Одна из наибольших проблем, стоящих в данный момент перед западной цивилизацией — это как отображать большое количество контента на небольшом пространстве.
Одно из эффективных решений заключается в размещении контента в последовательно выводимых блоках, используя то, что известно в отрасли (и в сетевом сообществе ) под названием контент-слайдер. Вы, возможно, не слышали о нем, но я готов поспорить, что вы определенно должны были его видеть.
Чтобы освежить вашу память и дать представление о том, что мы будем создавать, ниже приведен пример контент-слайдера :
В этой статье я расскажу, как создать свой собственный красивый слайдер контента, который очень похож на этот. Помимо просто создания контент-слайдера, вы узнаете много нового о том, как взаимодействуют HTML , CSS , и JavaScript , чтобы создать подобный элемент. В общем, вас ждет много нового, так что давайте приступим.
Обзор, как это работаетПеред тем, как с головой погрузиться в HTML , CSS , и JavaScript , которые потребуются, чтобы заставить все это работать, давайте сделаем небольшой шаг назад и осмыслим элементы, из которых состоит наш контент-слайдер.
Во-первых, у нас есть контент, который мы хотим загнать в слайдер:
Контент может быть каким угодно. Это могут быть изображения, стандартный HTML -контент, сочетание нескольких типов контента и т.д. Это на самом деле не имеет значения. Если наш контент может быть уложен в элементы DIV , все в порядке. Вам просто нужно убедиться, что каждый отдельный блок контента имеет одинаковую ширину и высоту.
При просмотре слайдера, вы видите одновременно только один блок контента. Если не предпринять дополнительных шагов, то выводимый одновременно контент в своем оригинальном размере может превратить слайдер во что-то очень визуально непривлекательное.
Мы исправим это в два этапа. Во-первых, мы обернём содержимое в контейнер, который имеет такой же размер, как один из блоков контента:
После того, как мы заключили контент в контейнер, обрезаем все элементы вокруг блока контента, чтобы обеспечить вывод только одного блока одновременно:
Следующим шагом является обеспечение возможности просматривать остальные части контента. Это можно сделать различными способами. В этой статье мы используем набор круглых ссылок, по которым вы можете кликать:
Последнее, что нужно сделать, чтобы слайдер заработал, это сделать кликабельной каждую ссылку. Для этого потребуются некоторые CSS -хитрости наряду с использованием JavaScript , но ничего слишком сложного. И это, мои дорогие друзья и враги, и весь краткий обзор того, из чего состоит контент-слайдер.
В следующих нескольких разделах мы рассмотрим реальные HTML , CSS и JavaScript коды, которые приведут наш слайдер в действие.
КонтентДавайте следовать тем же шагам, которые мы рассмотрели в кратком обзоре и начнем с … контента. Во-первых, мы должны создать отправную точку. Давайте создадим пустой HTML -документ и добавим в него следующий код из начального шаблона НTML5 :
Эта разметка не делает ничего, кроме как задает структуру документа, но это первый шаг, который позволит далее добавить наш контент. Давайте сделаем это в следующем разделе.
Контент (на этот раз настоящий )Внутри элемента body добавьте следующий HTML -код:
Между тегами style добавьте следующие правила для стилей, которые задают форму и цвет нашего контента:
#wrapper { width: 2200px; position: relative; left: 0px; } .content { float: left; width: 550px; height: 350px; white-space: normal; background-repeat: no-repeat; } #itemOne { background-color: #ADFF2F; background-image: url("http://www.kirupa.com/images/blueSquare.png"); } #itemTwo { background-color: #FF7F50; background-image: url("http://www.kirupa.com/images/yellowSquare.png"); } #itemThree { background-color: #1E90FF; background-image: url("http://www.kirupa.com/images/pinkSquare.png"); } #itemFour { background-color: #DC143C; background-image: url("http://www.kirupa.com/images/graySquare.png"); }
Теперь при просмотре страницы вы увидите нечто похожее на то, что приведено на скриншоте:
Вы увидите четыре больших прямоугольных блока, расположенных аккуратно бок о бок. В зависимости от разрешения экрана и размера окна браузера, вам, возможно, потребуется прокрутить немного вправо или влево, чтобы увидеть все прямоугольники.
Сейчас уделите немного внимания и постарайтесь понять, почему вы видите то, что вы видите. Просмотрите HTML -разметку и вникните в элементы, которые находятся в вашем документе.
Обратите внимание на значения class и id , которые используются в нем, потому что они будут соответствовать правилам стиля, который вы добавили. Посмотрите на правила стиля, и то, как их визуализация влияет на результат. Теперь давайте резюмируем все это.
Что мы сделалиВ нашей HTML -разметке контент, который вы видите, состоит из четырех элементов div , каждый из которых содержит значение класса content . Это значение класса проистекает из правила стиля .content , которое определяет размер каждого блока: 550 пикселей в ширину и 350 пикселей в высоту:
Content { float: left; width: 550px; height: 350px; white-space: normal; background-repeat: no-repeat; }
Правило стиля .content также задает значение float — left . В результате элементы div выстраиваются в ряд. И последнее, что это правило стиля объявляет, это свойство white-space . Это свойство определяет, как будет обернут текст в абзаце.
Я применил это свойство просто для удобства. Если вы решите выйти за рамки этой статьи и добавить контент для каждого из элементов div , вы будете только благодарны мне, потому что ваш текст будет обернут надлежащим образом, или удалите это свойство (или установите для него другое значение ), если вы не хотите увидеть его.
На данный момент, наш элемент div надлежащим образом подогнан и выстроен. Жаль, что он полностью невидим:
Для решения этой проблемы, мы присваиваем каждому div уникальный идентификатор через значения id: itemOne , itemTwo , itemThree , anditemFour . В разделе стилей у нас есть четыре правила стиля, которые соответствуют этим значениям id :
#itemOne { background-color: #0099CC; background-image: url("http://www.kirupa.com/images/blueSquare.png"); } #itemTwo { background-color: #FFCC00; background-image: url("http://www.kirupa.com/images/yellowSquare.png"); } #itemThree { background-color: #FF6666; background-image: url("http://www.kirupa.com/images/pinkSquare.png"); } #itemFour { background-color: #E8E8E8; background-image: url("http://www.kirupa.com/images/graySquare.png"); }
Как вы можете видеть, эти правила стилей определяют только цвет фона и фоновое изображение для нашего контента. С этого момента элементы div больше не невидимы. Они выводятся в виде прямоугольников разного цвета с размером 550 на 350 пикселей.
Мы почти закончили. Последнее, что мы рассмотрим, это таинственный div , который содержит id wrapper :
Этот элемент обертывает весь наш контент в один контейнер. Это не тот контейнер, который я имел в виду в обзоре, когда говорил об обрезании всего содержимого вокруг блоков контента.
Этот контейнер предназначен немного для другого. Он в буквальном смысле просто оборачивает контент для того, чтобы мы могли просматривать его весь.
Соответствующее правило стилей #wrapper выполняет эту задачу:
#wrapper { width: 2200px; position: relative; left: 0px; }
Сначала это правило стилей определяет ширину элемента оболочки в 2200 пикселей. То есть общую ширину нашего контента … которую вы получите умножив 4 (по количеству элементов div ) на 550 пикселей.
Свойства position и left предназначены для того, чтобы установить возможность переместить контейнер в любое место, куда мы захотим. Установив для свойства position значение relative , мы убираем этот элемент из стандартной структуры документа и делаем возможным разместить его в любом месте с использованием значений в пикселях относительно того места, где он сейчас находится.
Так как наши блоки контента div являются дочерними для этого div , они подтягиваются туда, где размещен родительский div . Как вы понимаете, это очень удобно!
Обрезка контентаВ предыдущем разделе, мы позаботились о получении блоков контента, которые будут выводиться. Следующее, что мы собираемся сделать, это обрезать наш контент, таким образом, чтобы в любой момент времени был виден только один блок слайдера.
Вот где нам понадобится основной контейнер. Оберните все элементы div вашего HTML -кода в div с идентификатором contentContainer :
Просто добавьте две новые строки и, если хотите, отступы строк, которые просто предназначены для укладки HTML -кода надлежащим образом.
Сейчас, если вы просмотрите наш обернутый (еще раз ) контент, вы не увидите ничего нового. Просто укладка элементов в еще один div ничего значимого не делает — тем более ничего из того, что мы хотим сделать, чтобы обрезать контент.
Чтобы добавить это значимое действие, создайте следующее правило стиля #contentContainer :
#contentContainer { width: 550px; height: 350px; border: 5px black solid; overflow: hidden; }
Обратите внимание, что вы задаете размер элемента contentContainer 550 пикселей на 350 пикселей. То есть точно такой же размер, какой имеет каждый из блоков контента. Чтобы слайдер немного выделялся, мы задаем черную рамку шириной в 5 пикселей.
Последнее, что мы делаем, это обрезаем контент, установив для свойства overflow значение hidden . Это нужно, чтобы скрыть все за пределами элемента contentContainer .
Все вместе дает нам следующую картину в браузере:
Обратите внимание, что сейчас видно только содержание вашего первого блока. Остальной контент по-прежнему существует, просто сейчас он скрыт вследствие нашей обрезки через значение hidden для свойства overflow .
Ссылки навигацииВот мы и добрались до них! Мы все ближе к тому, чтобы получить полностью рабочий слайдер. В этом разделе мы займемся ссылками навигации — элементами, которые вы нажимаете, чтобы увидеть другие блоки контента.
Эти ссылки не имеют ничего общего с нашим contentContainer или любой другой частью HTML -кода, который у нас уже есть. Вам нужно добавить выделенные строки в уже имеющийся у нас HTML -код (но выше тега script ):
Давайте бегло рассмотрим HTML -код, который вы только что добавили. Во-первых, у нас есть div с идентификатором navLinks , который описывает неупорядоченный список. Сами ссылки представлены в виде пунктов списка.
Каждый элемент списка содержит значение класса itemLinks , а также пользовательский атрибут data-* , называемый data-pos . Мы вернемся к этому атрибуту немного позже, а сейчас просто отметьте для себя, что он существует.
Нам нужно задать стиль для только что добавленного HTML -кода. В разделе стилей добавьте следующие правила:
#navLinks { text-align: center; width: 550px; } #navLinks ul { margin: 0px; padding: 0px; display: inline-block; margin-top: 6px; } #navLinks ul li { float: left; text-align: center; margin: 10px; list-style: none; cursor: pointer; background-color: #CCCCCC; padding: 5px; border-radius: 50%; border: black 5px solid; } #navLinks ul li:hover { background-color: #FFFF00; } #navLinks ul li.active { background-color: #333333; color: #FFFFFF; outline-width: 7px; } #navLinks ul li.active:hover { background-color: #484848; color: #FFFFFF; }
Ого, сколько CSS . Несмотря на то, что кода много, в нем нет ничего действительно уникального или интересного. Часть CSS -кода обеспечивает создание горизонтального меню со ссылками, выводимыми одна рядом с другой.
Остальной код определяет внешний вид каждой ссылки, а также соответствующее ей выделение при наведении курсора мыши.
На одном моменте все же стоит остановиться подробнее.
Это связано с двумя правилами стилей, которые относятся к классу active :
#navLinks ul li.active { background-color: #333333; color: #FFFFFF; outline-width: 7px; } #navLinks ul li.active:hover { background-color: #484848; color: #FFFFFF; }
Если вы помните, в нашем HTML -коде не было элемента, который бы имел значение класса active . Несмотря на это, эти правила стилей все же будут задействованы, потому что класс active добавляется одной из наших ссылок динамически.
Если сейчас вам трудно во всем этом разобраться, не волнуйтесь, очень скоро мы рассмотрим это подробно.
На данный момент наш слайдер выглядит следующим образом:
Если ваш слайдер выглядит не так, то высока вероятность того, что вы допустили опечатку … или что-то еще. Так и случилось?
Создание самого слайдераХорошо, на данный момент у нас есть что-то, что выглядит очень похоже на рабочий слайдер. Однако при нажатии любой из ссылок абсолютно ничего не происходит.
Давайте теперь создадим рабочий слайдер, однако перед этим добавим JavaScript и кое-какие крутые элементы… а именно красивые CSS -переходы.
Добавление JavaScriptВнутри тега сценария, добавьте следующие строки JavaScript -кода:
// просто запрашиваем DOM... будто просим разрешение у босса! var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); // activeLink обеспечивает метку для активного элемента var activeLink = 0; // устанавливаем отслеживание событий for (var i = 0; i < links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
Все, что нам осталось сделать, это обеспечить плавный переход вместо резкой смены слайдов.
Добавление переходаВ данный момент у нас есть контент-слайдер, который пока еще не прокручивает контент плавно. Вместо этого слайды резко перескакивают с одного на другой. Чтобы сделать прокрутку контента плавной, давайте используем CSS -переход. Добавим один из возможных переходов в наш слайдер.
Найдите правило стиля #wrapper и добавьте в него одну строку:
Строка, которую вы добавили, определяет переход. Свойство, указанное в ней, определяет, что переход должен осуществляться, когда изменяется свойство left . Наш переход будет осуществляться в течение 0,5 секунды, и будет использовать функцию тайминга ease-in-out для ускорения процесса в начале перехода и замедления в конце.
Поскольку свойство transition все еще претерпевает некоторые изменения в W3C , вы должны будете использовать префиксы, чтобы быть уверенными, что любой современный браузер может применить этот переход. Если вы не хотите иметь с этим дело, добавьте следующий скрипт непосредственно перед тегом script :
Нет, этот скрипт не делает ничего вредоносного. Это размещенная на хостинге версия библиотеки Леи Веру -prefix-free . Чтобы не изучать кучу всего о том, как работают слайдеры, вы также можете просто скачать ее скрипт, загрузить его на свой собственный сервер и ссылаться на свою собственную версию.
Во всяком случае, если вы сейчас просмотрите документ, вы должны иметь рабочий контент-слайдер, который плавно выводит контент при нажатии на любую из ссылок навигации. Это должно быть идентично тому, что вы видели в примере, размещенном в самом начале этой статьи.
Ну, наконец-то!!!
Разбор кода (и всего остального!)Теперь, когда у нас есть работающий контент-слайдер, давайте попробуем разобраться с самого начала, как код связывает все это вместе.
Что на самом деле происходитПосле загрузки контент-слайдера вы видите, как отображается первый блок контента. Остальной контент обрезан и скрыт от глаз:
Нажатие любой ссылки выводит соответствующий ей блок контента. Какую часть контента нужно вывести в видимой области, слайдер знает благодаря тесной связи между каждой ссылкой навигации и позицией в пикселях каждого блока контента.
Давайте попробуем разобраться в этой связи. Есть несколько вещей, которые мы знаем. Мы знаем, что каждый из наших блоков контента имеет 550 пикселей в ширину. Мы также знаем, что наш первый блок контента установлен горизонтально на 0 пикселей.
Откуда мы знаем это? Все наши блоки контента обернуты внутри элемента оболочки, который охватывает весь наш контент, и левый край элемента оболочки имеет позицию 0 пикселей:
Это объявлено в правиле стиля #wrapper . Из этого правила стиля мы также знаем, что все блоки контента смещаются влево и расположены в ряд друг за другом.
Зная это, мы можем вычислить позиции для всех блоков контента следующим образом:
Первый блок расположен в точке 0 пикселей. Ширина первого блока контента — это позиция второго блока. То есть 550 пикселей. Каждый последующий блок имеет позицию на 550 пикселей больше, чем предыдущий.
Так как мы знаем точное положение в пикселях каждого блока контента, мы можем использовать эту информацию, чтобы указать контент-слайдеру сдвинуть элемент оболочки в нужное место, так чтобы была видна нужная нам часть контента.
Атрибут data-pos!Прекрасно, теперь нам известны позиции всех блоков контента. Что мы еще не рассмотрели, так это как знание позиции блока контента в пикселях поможет нам вывести в окне слайдера нужный блок.
Как мы можем указать, что при нажатии на ссылку должен выводиться тот или иной блок контента? Просто. Каждая ссылка содержит точную позицию (в пикселях ) блока контента, которому она соответствует:
Обратите внимание на то, что атрибут data-pos указывает каждой из ссылок, на значение каждого из атрибутов data-pos . Они равны отрицательному значению исходного горизонтального положения каждого из блоков контента.
Когда мы нажимаем на ссылку, используется JavaScript , который считывает атрибут data-pos , связанный с данной ссылкой, а затем переключает для нашего элемента оболочки значение позиции в пикселях, на значение которое было считано из атрибута.
Например, вот что происходит после нажатия на третью ссылку:
Для третьей ссылки определено значение data-pos — 1100 пикселей. Это соответствует тому, на сколько пикселей нужно будет переместить оболочку контейнера, чтобы в видимой области был выведен третий блок контента. Нажатие любой другой ссылки установит для свойства элемента оболочки значение, содержащееся в атрибуте data-pos этой ссылки.
Хорошо, мы разобрались со связью между ссылками и позицией контента, о которой я говорил ранее. Теперь нам осталось только рассмотреть JavaScript , который преобразует все то, о чем я написал в этом разделе в нечто, что будет понятно браузеру.
Это все о JavaScriptТак как теперь у вас есть концептуальное представление о том, как все работает внутри нашего контент-слайдера, давайте рассмотрим JavaScript , который реализует все, что вы знаете. Как я делаю во всех своих статьях, давайте разберем каждую строку JavaScript и посмотрим, что она делает для нашего слайдера.
Начнем с самого верха:
var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper");
Переменная links принимает набор всех элементов нашего документа, которые имеют значение класса itemLinks . Эти элементы представляют собой пункты списка, которые действуют как ссылки навигации. Переменная wrapper очень похожа на links . Она принимает указатель на элемент с идентификатором wrapper .
querySelector и querySelectorAllОбратите внимание, как я запрашиваю DOM . Вместо того чтобы, использовать что-то вроде getElementsByClassName или getElementById , я использую новые функции querySelectorAll и querySelector .
Вы увидите, что обе эти переменные мы будем использовать позже, так что помните о них.
var activeLink = 0;
Переменная activeLink используется для хранения позиции контента, отображаемого в данный момент. Вы лучше поймете смысл этой переменной, когда я поясню ее в действии чуть позже.
Следующий набор строк — это цикл for:
// установка отслеживания событий for (var i = 0; i < links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }
Здесь мы перебираем каждый элемент переменных links и назначаем ему отслеживание событий. Этот элемент отслеживания событий будет вызывать функцию setClickedItem , когда было зафиксировано событие клика.
Следующая строка вызывает целый ряд изменений:
// установка первого элемента в качестве активного links.classList.add("active");
Мы добавляем значение активного класса к элементу первой ссылки навигации. Это делается через передачу значения activeLink в массив links . Так как activeLink равно 0 , обычно массив принимает первый элемент и, используя classList API , добавляет значение класса active .
После того, как выполнена эта строка кода, помните, мы обращали внимание на следующие правила стиля?
Что ж, теперь эти правила стиля вступают в действие и помогают выделить активную ссылку навигации из списка других неактивных ссылок. Немного позже мы вернемся к этим правилам стиля и рассмотрим их более подробно.
Следующее, что мы рассмотрим, это обработчик событий setClickedItem , который вызывается при нажатии на любую из ссылок:
function setClickedItem(e) { removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); }
Эта функция сначала переключает состояние всех ваших ссылок на неактивное с помощью вызова removeActiveLinks . Мы рассмотрим эту функцию чуть позже.
Другая важная вещь, которую делает эта функция, это то, что она изменяет на activeLink значение свойства itemID выбранного элемента. Это обеспечивает то, что activeLink всегда указывает на номер, который соответствует блоку контента, выводимому в данный момент в слайдере.
После выполнения этих двух (довольно скучных ) действий, данная функция передает ссылку на выбранный элемент в функцию changePosition . Которая в свою очередь делает пару удивительных вещей, о чем я расскажу в следующем пункте.
Вот, где происходят интересные изменения! Давайте немного перепрыгнем вперед и рассмотрим функцию changePosition :
// Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
Эта функция делает две вещи:
І. Переключает визуальное отображение выбранной ссылки, чтобы указать, что в настоящее время она является активной.
II. Устанавливает позицию элемента оболочки.
Давайте рассмотрим эти две вещи более подробно.
Переключение визуального отображения выбранной/активной ссылкиЧтобы вам было понятнее, то о чем я говорил перед этим, ваши ссылки навигации могут быть в одном из двух состояний. Эти состояния предназначены для того, чтобы пользователь видел, какой блок контента в настоящее время является активным:
На этом рисунке вы можете сразу определить, что блок контента, соответствующий четвертой ссылке в данный момент является активным, а первые три ссылки неактивны.
Это изменение визуального отображения осуществляется путем добавления и удаления классов CSS . Класс active добавляется активной ссылке. Все ссылки, которые не являются активными, не содержат значения класса active . Вы поймете, как это работает, когда мы рассмотрим функцию removeActiveLinks .
В любом случае вы помните, что ранее мы вызвали следующие два правила стиля:
#navLinks ul li.active { background-color: #333333; color: #FFFFFF; outline-width: 7px; } #navLinks ul li.active:hover { background-color: #484848; color: #FFFFFF; }
В нашей функции setClickedItem (также известной, как функция, которая будет вызываться в результате нажатия на ссылку ), мы сначала вызываем removeActiveLinks :
function setClickedItem(e) { removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); }
Эта функция отвечает за удаление класса active для всех ссылок навигации:
function removeActiveLinks() { for (var i = 0; i < links.length; i++) { links[i].classList.remove("active"); } }
Вы можете представить ее, как глобальную кнопку сброса. Она перебирает ссылки навигации, которые хранятся в переменной ссылок и удаляет значение класса active , используя classList.remove() . Просто имейте в виду, что если любая из ссылок навигации содержала значение класса active , что ж … больше его не будет.
Таким образом, мы рассмотрели, как удалить класс active у всех ваших ссылок. Добавление класса в свою очередь происходит очень просто:
function removeActiveLinks() { for (var i = 0; i < links.length; i++) { links[i].classList.remove("active"); } }
Тот же ClassList , который мы использовали ранее для удаления значения активного класса, мы используем, чтобы обратно добавить значения класса active выбранной ссылке. Эта выбранная ссылка получает аргумент link , который передается ей.
Установка позиции оболочкиМы почти закончили! После всех этих этапов мы, наконец, добрались до функции changePosition , которая собственно устанавливает позицию элемента оболочки слайдера и отображает блок контента, соответствующий выбранной вами ссылке.
Давайте рассмотрим следующий фрагмент:
function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }
Переменная position хранит значение атрибута data-pos нажатой нами ссылки. После того, как мы получили значение атрибута data-pos , мы устанавливаем для свойства CSS left элемента оболочки то же самое значение.
Как это связано с реализацией эффекта слайдера? Вы помните, что некоторое время назад мы добавили к стилю #wrapper одно правило?
#wrapper { width: 2200px; position: relative; left: 0px; transition: left .5s ease-in-out; }
Обратите внимание, что мы определили для transition вступать в действие, когда изменяется свойство left . Угадайте, что делает наш JavaScript ? Задает свойство left ! CSS-переход обнаруживает это изменение и запускает перемещение контента. Все, что вам нужно, чтобы заставить все это работать, это добавить одну строку JavaScript .
Я не знаю, как насчет вас, но для меня это просто удивительно. Это то, что мы не могли себе представить несколько лет назад, когда нам приходилось прилагать много усилий и писать код для обработки эффекта слайдера. Это то, что делает наш контент-слайдер красивым.
Вот так вот просто мы только что создали с нуля контент-слайдер и (что более важно ) узнали, как он работает.
Улучшение контент-слайдераСлайдер контента, который мы только что создали, довольно крут, но можно сделать его еще круче. В этом разделе мы рассмотрим два улучшения, которые могут оказаться вам очень полезными. Попутно мы узнаем некоторые новые трюки JavaScript и CSS . Это будет, как говорит сейчас молодежь: «Я рыдаю !».
Прокручивание с помощью преобразования translate3dВ данный момент наши слайды прокручиваются с помощью изменения значения свойства CSS left , которое применяется к элементу div wrapper . Используя свойство left , мы заставляем слайдер работать, однако этот метод имеет серьезные недостатки. Вы не можете использовать аппаратное ускорение, чтобы обеспечить плавную смену слайдов.
Это особенно актуально для мобильных устройств, при низкой скорости Интернет-соединения часто использующих аппаратные средства, и здесь прерывистая, скачкообразная смена слайдов может быть особенно заметной.
Это можно исправить с помощью функции translate3d transform , которая заставит слайды перемещаться плавно. Эта функция принимает в качестве аргументов значения х , y и z , и изменение любого из этих значений приведет к изменению позиции целевого элемента.
Особенностью данной функции является также то, что в результате ее использования браузер аппаратно ускоряет изменение позиции. Чего же мы ждем?
Первое, что нам нужно сделать, это изменить правило стиля #wrapper . Замените объявление свойств position и left следующим кодом:
Таким образом, с помощью transform задается исходная позиция элемента оболочки.
Первый этап: Добавление вспомогательных элементовНа первом этапе добавляем следующий вспомогательный код ниже основного кода, который мы имеем на текущий момент:
// // Использование преобразований // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(transforms); // управление вендорными префиксами function getSupportedPropertyName(properties) { for (var i = 0; i < properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }
Этот код поможет нам установить свойство transform с помощью вендорных префиксов, таким образом, оно будет поддерживаться максимальным количеством браузеров.
В этой статье я не буду пояснять данные строки. Единственное, что вам нужно знать, это то, что весь этот код помогает установить для свойства Property значения transform , msTransform , mozTransform или oTransform . В зависимости от того, насколько старый браузер вы используете, будет использоваться одно из этих значений.
Второй этап: внесение Ahoy!В функции changePosition найдите следующие строки кода:
function changePosition(link) { var position = link.getAttribute("data-pos"); wrapper.style.left = position; link.classList.add("active"); }
Замените их следующим кодом:
function changePosition(link) { var position = link.getAttribute("data-pos"); var translateValue = "translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }
Этот код делает довольно простые вещи. Переменная translateValue создает представление на основе строк функции translate3d , в котором часть X заполняется значением переменной position . После того, как эта строка была создана, все, что нам осталось сделать, это передать ее в объект style элемента wrapper .
Обратите внимание, что определение соответствующего свойства стиля обрабатывается переменной transformProperty , которую мы уже рассмотрели чуть ранее.
Если вы теперь просмотрите документ, то увидите, что блоки контента в слайдере перепрыгивают с одного места в другое.
Очевидно, что не это вы ожидали увидеть. Что случилось с плавным перемещением? Ответ заключается в том, что нам недостает еще одного изменения. К счастью, это легко исправить. Если мы вернемся к правилу стиля #wrapper , то заметим, что объявление transition выглядит следующим образом:
#wrapper { width: 2200px; transform: translate3d(0, 0, 0); transition: left .5s ease-in-out; }
Наш переход отслеживает изменения свойства left . Мы больше не используем это свойство, поэтому наш переход и не может начать работать. Чтобы исправить эту ужасную несправедливость, замените ключевое слово свойства left внутри объявления transition на ключевое слово свойства transform :
#wrapper { width: 2200px; transform: translate3d(0, 0, 0); transition: transform .5s ease-in-out; }
Как только вы внесете эти изменения, наш слайдер снова будет работать примерно таким же образом, как и до того.
Разница заключается только в том, что при смене слайдов теперь используется аппаратное ускорение, и она будет происходить теперь более плавно и поддерживаться на большем количестве устройств.
Автоматическая смена слайдов с интервалом в несколько секундВ данный момент слайды у нас меняются только когда мы нажимаем на одну из ссылок навигации. Но это не единственный способ работы слайдера. Многие контент-слайдеры автоматически прокручивают контент каждые несколько секунд, при этом также существует возможность перейти к конкретному разделу с помощью ссылок навигации.
Пример одного из таких контент-слайдер вы видите ниже:
Да, это наш старый слайдер, в который внесены небольшие изменения, чтобы контент мог автоматически прокручиваться в контейнере. Угадайте, что мы будем делать дальше?
Заставим слайды прокручиваться автоматически!В этом нам поможет функции setInterval. Основная задача этой функции — обеспечить выполнение кода через равные промежутки времени:
window.setInterval(functionToCall, delay);
Каждые несколько секунд (или сколько вы зададите в качестве значения интервала ), функция setInterval указывает нашему слайдеру переходить к следующему блоку контента.
Когда контент закончился, слайдер через цикл переходит к началу контента и начинает все заново. Делается это довольно несложно. От вас требуется только знание нескольких приемов и четкое понимание того, как работает ваш контент-слайдер.
Первое изменение, которое нам нужно внести, это добавить дополнительный код, необходимый, чтобы выполнить эту работу. В конце уже имеющегося у вас кода добавьте следующие строки:
// // Код для автоматической смены слайдов // var timeoutID; function startTimer() { // ожидание в течение 2 секунд перед вызовом goInactive timeoutID = window.setInterval(goToNextItem, 2000); } startTimer(); function goToNextItem() { removeActiveLinks(); if (activeLink < links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }
Что означает весь этот код, мы рассмотрим в ближайшее время. Сейчас добавьте все это. После того, как вы сделаете это, просмотрите контент-слайдер в браузере. Вы увидите, что слайды контента меняются в контейнере каждые две секунды.
Существует только одно значительное изменение, которое нам осталось внести. Сейчас слайды сменяют друг друга каждые две секунды, независимо от того, нажали ли вы ссылку навигации или нет.
Правильнее будет сделать так, чтобы после нажатия одной из ссылок таймер сбрасывался на 0. Чтобы внести это изменение, добавьте следующую строку кода в обработчик событий setClickedItem :
После этого контент-слайдер будет вести себя должным образом, когда вы вмешиваетесь и нажимаете на ссылку навигации. Ура!
Пояснение автоматической смены слайдовИтак, нам осталось разобраться только с одной вещью. Давайте быстро рассмотрим код, который мы только что добавили, и поймем, почему он делает то, что он делает.
Начнем с функции goToNextItem/span> :
function goToNextItem() { removeActiveLinks(); if (activeLink < links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}
Эта функция отвечает за отслеживание контента, который отображается в данный момент, и того, что последует за ним. Чтобы лучше понять, что происходит, взгляните на приведенное ниже изображение:
Переменная activeLink указывает на положение текущего отображаемого блока контента. Каждая часть информации связана с соответствующим элементом внутри массива links .
Общее количество элементов внутри массива links может быть установлено через свойство length . Теперь давайте вернемся к нашему коду.
Оператор if функции goToNextItem просто проверяет, остался ли еще контент или слайдеру следует вернуться в начало:
if (activeLink < links.length - 1) { activeLink++; } else { activeLink = 0; }
Если вы внимательно присмотритесь к диаграмме и коду, то поймете логику. В принципе, как только мы получили правильное значение для activeLink , все остальное в нашем слайдере будет просто работать благодаря магии.
Сама магия выполняется с помощью следующих двух строк, предоставляемых функцией changePosition , которая в свою очередь вызывается с указателем на следующий блок контента для вывода:
var newLink = links; changePosition(newLink);
В данный момент путь, по которому обрабатывается наш код, ничем не отличается от того, как он обрабатывался при нажатии на ссылку вручную.
Итак … мы рассмотрели код в функции goToNextItem для перемещения к следующей части контента. Чтобы вызвать этот слайд автоматически задействуются следующие строки:
var timeoutID; function startTimer() { // ожидание в течение 2 секунд перед вызовом goInactive timeoutID = window.setInterval(goToNextItem, 2000); } startTimer(); function resetTimer() { window.clearInterval(timeoutID); startTimer(); }
Для запуска используется функция startTimer . Эта функция содержит вызов setInterval , который обеспечивает, чтобы функция goToNextItem вызывалась каждые 2 секунды (или 2000 миллисекунд ).
Просто добавив эту функцию (и вызвав ее ), вы заставите ваш контент-слайдер начать автоматически прокручивать блоки контента.
Осталось только разобраться с тем, как сбрасывается таймер (который я назвал setInterval ), когда вы вручную нажимаете ссылку. Чтобы справиться с этим, задействуется оставшийся у нас код.
Метод, с помощью которого сбрасывается таймер, заключается в следующем: мы останавливаем функцию setInterval , а затем запускаем ее снова. С тем как это делается, возможно, будет немного сложно разобраться.
Мы сохраняем идентификатор вызываемой функции setInterval , а затем используем тот же идентификатор, чтобы потом остановить вызов этой же функции setInterval . Позвольте мне пояснить.
Этот идентификатор мы сохраняем в переменной timeoutID и инициализируем в вызове startTimer , и этот же идентификатор удобно использовать внутри функции resetTimer :
function resetTimer() { window.clearInterval(timeoutID); startTimer(); }
Функция clearInterval принимает идентификатор (через timeoutID ) функции setInterval , которую мы хотим остановить.
После того, как мы остановили таймер внутри функции resetTimer , мы вызываем startTimer и начинаем все это снова:
function resetTimer() { window.clearInterval(timeoutID); startTimer(); }
Логика проста. Таймер останавливается, когда вы вручную выбираете, какой блок контента нужно вывести в слайдере:
function setClickedItem(e) { removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); }
После того как вы выбираете новый блок контента, слайдер останавливается на две секунды, прежде чем перейти к следующему блоку. Отслеживание всего этого осуществляют функции startTimer и resetTimer .
ЗаключениеВот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только
HTML CSSи JavaScript . Кроме того, вы узнали, как задать некоторые изменения, для того чтобы увеличить производительность и обеспечить возможность автоматической смены блоков контента.
В то время как сам слайдер определяется не таким уж и большим количеством кода, разбор концепций, которые лежат в его основе, возможно, займет у вас некоторое время. Я разместил в статье ссылки на другие источники, которые освещают темы, затронутые мной лишь поверхностно. Вы можете прочесть их, когда у вас будет для этого время.
Контент-слайдеры бывают разных форм и размеров. Некоторые состоят из нескольких уровней, где смена контента может осуществляться как по вертикали, так и по горизонтали.
Некоторые слайдеры содержат вертикально выровненный контент с блоками расположенными друг над другом. Если вы довольно инициативны и хотите использовать вместо перехода CSS
