Бесконечный слайдер карусель на js. Как создать карусель используя только HTML и CSS. Добавление новых слайдов в JavaScript карусель
/* Тут начинается наша карусель. Блок.carousel-wrapper спозиционирован относительно, абертки.carousel-item абсолютно. . */ .carousel-wrapper{ position:relative; /* Абсолютно спозиционированные блоки получают высоту и ширину от родителя. Мы сделали их прозрачными по умолчанию, и потом они будут плавно появляться по нажатию на ссылки.arrow-prevи.arrow-next. */ .carousel-item{ position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Заметили padding слева и справа по 50px? Таким способом мы можем позиционировать наши ссылки! Каждая будет по 50px шириной. Кроме того, я использую пустые ссылки с фоновым рисунком таким образом, что ссылки выглядят как стрелки. Проверьте, поменяли ли вы URL ссылок с оригинальным URL, чтобы ваши ссылки не были просто прозрачными прямоугольниками. */ .arrow{ position:absolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url("/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Давайте вернем нашу стрелку налево. */ &.arrow-prev{ left:0; } /* А вторую направо. Поскольку я использую одно и то же изображение для стрелки, я поворачиваю его на 180 градусов. */ &.arrow-next{ right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); } } /* Мне очень нравится, как слайды карусели смотрятся на темном фоне, и если блок.carousel-itemимеет класс "light", мы изменим его текст на белый и используем белые стрелки вместо серых. Проверьте еще раз, правильно ли указан путь к изображению стрелки */ &.light{ color:white; .arrow{ background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; } } /* Напишем медиа-запрос для изменения размера стрелок на устройствах с меньшим размером экрана.*/ @media(max-width:480px){ .arrow,&.light.arrow{ background-size:10px; background-position:10px50%; } } } /* Установим целям для ссылок значение display: none; Таким образом, мы избавляемся от постоянного перепрыгивания браузера в самый верх карусели при каждом нажатии на стрелки. Это свойство действует для любых элементов, чей идентификатор начинается на "target-item". */ { display:none; } /* Выше мы сделали все наши слайды карусели прозрачными, а это значит, что во время загрузки карусели мы будем получать вместо нее большое пустое поле. Изменим значение прозрачности для первого слайда на 1 для отображения. Так же устанавливаем z-index значение 2, позиционируя его выше остальных слайдов. */ .item-1{ z-index:2; opacity:1; } /* Но нам не нужно, чтобы первый слайд всегда имел значение прозрачностиopacity: 1; в противном случае нам придется пробираться через этот слайд, во время ротации остальных. */ *:target~.item-1{ opacity:0; } /* ..но если #target-item-1 в фокусе, и мы хотим показать первый слайд, тогда выбираем его с помощью значка ~ и устанавливаем прозрачность опять в 1:-) */ #target-item-1:target~.item-1{ opacity:1; } /* Если другие target-item-# в фокусе, выбираем их используя ~ селектор, плавно показываем, и размещаем их сверху с помощьюz-index: 3. Тут вы можете добавить дополнительные spanс идентификатором target-item, если их у вас будет больше трех. Может сразу и добавить 10 штук.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3{ z-index:3; opacity:1; } }
1. jQuery карусель «clickCarousel»
Блок с прокруткой анонсов новостей. Для прокрутки блоков используются стрелки влево/вправо. В архиве карусель в двух стилевых оформлениях: светлом и темном.
1. jQuery карусель, плагин «carouFredSel»
Аккуратная свежая карусель изображений на jQuery.
4. jQuery плагин: карусель «Elastislide»
Отличные слайдеры контента в виде карусели изображений с применением 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»
Плагин для реализации горизонтальной прокрутки содержимого в определенной области. При наведении курсора мыши на левый или правый край области, начинается прокручивание.
Навигация между слайдами с контентом может осуществляться с помощью стрелок или по нажатию на миниатюру. Снизу есть кнопка «Show», позволяющая скрыть/показать миниатюры или полное описание слайда.
15. Ротатор контента «Circular Content Carousel»
Блок со скроллером, появляющимся при наведении курсора. Прокручивать содержимое можно как с помощью полосы прокрутки, так и с помощью колеса мыши.
Подобное 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 -плагин для создания слайд-шоу или каруселей. Он имеет множество настроек, включая типы переходов, выравнивание изображений, и скорость переключения кадров.
11.01.15 308976В настоящее время слайдер – карусель – функционал, который просто необходимо иметь на сайте для бизнеса, сайте — портфолио или любом другом ресурсе. Наряду с полноэкранными слайдерами изображения, горизонтальные слайдеры – карусели хорошо вписываются в любой веб-дизайн.
Иногда слайдер должен занимать одну треть страницы сайта. Здесь слайдер — карусель используется с эффектами переходов и с адаптивными макетами. Сайты электронной коммерции используют слайдер – карусель для демонстрации множества фото в отдельных публикациях или страницах. Код слайдера можно свободно использовать и изменять его в соответствии с потребностями.
Используя JQuery совместно с HTML5 и CSS3 , можно сделать ваши страницы более интересными, снабдив их уникальными эффектами, и обратить внимание посетителей на конкретную область сайта.
Slick – плагин современного слайдера — каруселиSlick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки » для мобильных устройств, и, в режиме «перетаскивания » для десктопной версии.
Содержит эффект перехода «затухание », интересную возможность «режим в центре », ленивую загрузку изображений с автопрокруткой. Обновленный функционал включает в себя добавление слайдов и фильтр слайдов. Все для того, чтобы вы настроили плагин в соответствии с вашими требованиями.
Демо-режим | Скачать
Owl Carousel 2.0 – jQuery — плагин с возможностью использования на сенсорных устройствахВ арсенале этого плагина – большой набор функций, подходящий как для новичков, так и для опытных разработчиков. Это обновленная версия слайдера — карусели. Его предшественник именовался точно также.
Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0 .
Поддержка возможности drag and drop
включена для более удобного использования плагина на мобильных устройствах.
Плагин отлично подойдет для отображения больших изображений даже на маленьких экранах мобильных устройств.
Примеры | Скачать
Довольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.
Примеры | Скачать
Ультра компактный jQuery слайдер – карусель, функционал которого намного больше, чем у обычного слайдера. Он включают в себя предварительный просмотр одного изображения, отображение нескольких изображений в виде карусели и слайдера на основе заголовков.
Примеры | Скачать
Owl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop , легко встраиваемый в HTML — код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой — либо специально подготовленной разметки.
Примеры | Скачать
Использует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.
Примеры | Скачать
Великолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.
Примеры | Скачать
Адаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.
Примеры | Скачать
Наиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера — карусели часто встречается на сайтах любого типа.
Примеры | Скачать
Это слайдер крошечного размера готов работать на устройствах с любым разрешением экрана. Слайдер может работать как в круговом, так и карусельном режиме. Tiny circle представлен как альтернатива другим слайдерам подобного типа. Имеется встроенная поддержка операционных систем IOS и Android .
В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.
Примеры | Скачать
Мощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.
Примеры | Скачать
Содержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.
Примеры | Скачать
Измените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.
Примеры | Скачать
jCarousel — jQuery плагин, который поможет организовать просмотр ваших изображений. Вы сможете с легкостью создавать пользовательские карусели изображений из основы который показан в примере. Слайдер адаптивный и оптимизирован для работы на мобильных платформах.
Примеры | Скачать
Scrollbox компактный плагин для создания слайдера – карусели или текстовой бегущей строки. Основные функции включают в себя эффект вертикальной и горизонтальной прокрутки с паузой при наведении курсора мыши.
Примеры | Скачать
Простой слайдер – карусель. Если вам нужен быстрый плагин – этот подойдет на 100%. Поставляется только с основными функциями, необходимыми для работы слайдера.
Примеры | Скачать
Создатели Flexisel вдохновились плагином старой школы jCarousel , сделав его копию, ориентированную на корректную работу слайдера на мобильных и планшетных устройствах.
Адаптивный макет Flexisel , при работе на мобильных устройствах, отличается от макета, ориентированного на размер окна браузера. Flexisel отлично адаптирован к работе на экранах, как с низким, так и высоким разрешением.
Примеры | Скачать
Elastislide отлично адаптируется под размер экрана устройства. Вы можете задать минимальное количество отображаемых изображений при определенном разрешении. Хорошо работает в качестве слайдера – карусели с галерей изображений, используя фиксированную обертку совместно с эффектом вертикальной прокрутки.
Пример | Скачать
Свободно распространяемый слайдер от Woothemes . По праву считается одним из лучших адаптивных слайдеров. Плагин содержит несколько шаблонов и будет полезен как начинающим пользователям, так и экспертам.
Пример | Скачать
Amazing Carousel – адаптивный слайдер изображений на jQuery . Поддерживает множество систем управления сайтами, такие как WordPress , Drupal и Joomla . Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing carousel позволяют использовать слайдер в вертикальном, горизонтальном и круговом режимах.
То иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю 🙂
О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично 🙂
Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.
Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.
Как сделать JavaScript слайдер: началоСегодня, думаю, что каждый, кто попадал в похожую ситуацию, начинал с поисков имеющихся наработок, т.к. когда задача сделать JS карусель стоит в рамках работы — это всегда должно быть сделано максимально быстро. И при таких условиях сидеть и выдумывать свои велосипеды, ясное дело, никто не позволит.
Заказчикам всегда наплевать на то, как код написан, какая у него архитектура, главное — видеть результат!
В итоге, как вы поняли, перед тем, как написать слайдер на JavaScript без jQuery, я решил подыскать готовый и доработать его под свои нужды. Почему без jQuery? Да потому что на целевом ресурсе, куда я планировал подключать свой слайдер через сервис, вызов jQuery в коде был расположен позже скрипта, подключаемого сервисом. Поэтому jQuery конструкции в моём коде просто не воспринимались.
В качестве основы я взял этот JavaScript слайдер изображений — https://codepen.io/gabrieleromanato/pen/pIfoD.
Остановиться я решил именно на нём, т.к. его JS код был написан с применением принципов ООП и классы в нём основываются на прототипах, а не на банальных функциях.
Честно говоря, я глубоко не понимаю и не признаю сегодняшнюю шумиху вокруг JavaScript с использование ООП, фреймворков и прочих архитектурных штук в языке, который изначально задумывался как простенький язык динамических сценариев. Равно как и сам JS я откровенно недолюбливаю с его синтаксическим винегретом, позволяющим одни и те же конструкции писать несколькими способами.
Но, к сожалению, в современном мире мои позиции мало кто разделяет, т.к. данный язык развивается сумасшедшими темпами и предпринимает даже попытки завоевать умы бэкенд разработчиков с помощью Node.js как альтернативы Java, PHP, C#, Ruby и других монстров.
В итоге, чтобы банально не остаться без работы, приходится по-тихоньку с JavaScript разбираться. А в выбранной мною реализации слайдера на чистом JavaScript я встретил то, что, как вы поняли, презираю в данном языке. Поэтому я её и выбрал, чтобы был хоть какой-то повод поработать и разобраться с JavaScript ООП и прототипными классами — иначе я бы к ним добровольно никогда в жизни не прикоснулся бы 🙂
На базе найденного мною кода мне необходимо было разработать слайдер на чистом JS во всплывающем окне (такую штуку ещё называют popup, попап и т.д.), который имел бы кнопки переключения слайдов и кликабельные индикаторы текущего слайда. Также нужно было сделать кнопку для закрытия данного окна.
Вот, что у меня получилось в итоге.
Делаем библиотеку JS слайдераСперва я решил всё реализовать по уму и сделать JavaScript слайдер для сайта в виде библиотеки, подключаемой на сайт одним-единственным скриптом, в котором будут вызываться компоненты слайдера, разбитые по подкаталогам. Назвать её я решил popupSlider.js в честь её изначального предназначения.
Её код можно найти на GitHub по этому адресу — https://github.com/Pashaster12/popupSlider.js
Структура библиотеки вышла следующая:
Папка slides предназначена для картинок слайдов. В controls размещены картинки элементов управления JS каруселью (кнопки закрытия слайдера и переключения слайдов). А в assets — статические элементы JS слайдера: HTML разметка и файл с CSS стилями.
Ну, а файл popupSlider.js — это и есть сердце самой библиотеки, в котором прописаны действия JavaScript карусели и устанавливается связь с остальными файлами. Именно его мы и будем подключать на сайте, а он уже будет вызывать остальные.
Я решил начать с HTML разметки нашей JS карусели картинок, которая в моём случае выглядит так:
Text 1
Text 2
Text 3
Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:
#slider { margin: auto; width: 600px !important; overflow: hidden; } #slider-wrapper { width: 9999px; height: 343px; position: relative; transition: left 400ms linear; } .slide { float: left; width: 600px; position: relative; overflow: hidden; } .caption { width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: #000; display:table; } .caption-container { display: table-cell; vertical-align: middle; padding: 0 20px; } #slider-nav { position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); } #slider-nav a { width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50%; margin: 0 5px; background-color: #fafafa; } #slider-nav a.current { background-color: #337ab7; } .horizontal-controls { position: absolute; display: inline-block; width: 12px; height: 20px; top: 50%; margin-top: -10px; } #prev { background: url(../controls/arrow_left_inactive.png); left: -40px; } #prev:hover { background: url(../controls/arrow_left_active.png); } #next { background: url(../controls/arrow_right_inactive.png); right: -40px; } #next:hover { background: url(../controls/arrow_right_active.png); } #cq-popup { width: 600px; z-index: 23; left: calc(50%); top: calc(50%); position: fixed !important; background-repeat: no-repeat; background-position: right; background-color: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; transform: translate(-50%, -50%) scale(1); } #cq-popup .header { display: inline-block; font-size: 17px; font-weight: 500; } #cq-popup > div { width: 500px; font-size: 22px; line-height: 36px; } #cq-popup-btclose { text-decoration: none; position: absolute; right: -40px; top: 0; background: url(../controls/btn_delete_inactive.png); height: 16px; width: 16px; } #cq-popup-btclose:hover { background: url(../controls/btn_delete_active.png); } #cq-popup-bg { position: fixed; top:0; width: 100%; height: 100%; background: rgba(51,51,51,0.8); z-index: 22; }
В результате применения данных стилей JS карусель выглядит следующим образом:
И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.
Кроме того, многие ещё любят минимизировать JS для ускорения загрузки сайта. Так что кастомизировать данное решение при указанных условиях было бы очень сложно.
В итоге, я решил просто подключать готовые файлы в главном файле библиотеки popupSlider.js, который для моей постановки задачи принял следующий вид:
Function Slider(element) { this.loadStatic(); this.el = document.querySelector(element); this.init(); } Slider.prototype = { init: function () { this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this.el.querySelector("#prev"); this.navigate(); }, navigate: function () { var self = this; for (var i = 0; i < this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index > 1) this.prevBtn.style.display = "block"; else if (index == 1) this.prevBtn.style.display = "none"; }, setCurrentLink: function (link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.
Конструктор определяется с помощью следующей конструкции:
Function Slider(element) { //код конструктора }
Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.
Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:
Slider.prototype = { //методы }
Вызываться за пределами тела класса они будут следующим образом:
Var slider = new Slider(); slider.class_method();
А внутри самого кода класса доступен следующий способ:
This.class_method();
Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:
Var self = this; self.class_method(); //чтобы обратиться к методу, находящемся на уровень выше кода описываемого метода
Вроде обо всех нюансах написания кода я рассказал. Теперь пару слов о методах нашего JavaScript класса, внутри которых содержатся описания действий JS карусели картинок.
loadStatic()
Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.
Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны стилей.
Далее мы делаем то же самое для файла с HTML разметкой нашего слайдера на чистом JavaScript. Вот только здесь есть маленький нюанс: просто так HTML файл внутри такого же подключить нельзя, как мы сделали это с CSS файлом. Для этого есть специальные библиотеки, например, для того, чтобы подключить HTML в HTML, отлично подходит либа от w3.org — https://www.w3schools.com/howto/howto_html_include.asp
Но тогда её пришлось бы или подключать в саму библиотеку слайдера, или просить о самостоятельной её установке пользователей. Но всё это неоптимально, т.к. требует много телодвижений и замедляет скорость загрузки сайта за счёт дополнительных скриптов.
В итоге, я решил получать содержимое HTML файла внутри JavaScript кода и загружать его в новый div элемент, создаваемый в памяти, как я делал это ранее для подключения CSS файла в JavaScript. Сгенерированный элемент подключается в самый конец секции body HTML кода страницы сайта.
Если хотите вставить div с разметкой слайдера не просто в конец body, а в какой-то конкретный контейнер, то можете вместо следующего кода:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.
В конце вызывается метод navigate().
navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.
Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.
При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.
slide(element)
Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.
В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.
Само переключение слайдов работает следующим образом:
В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.
setCurrentLink(link)
Данный метод нашего класса JavaScript слайдера отвечает за подсветку навигационной круглой кнопки, соответствующей текущему элементу. Т.е. если у нас выбран второй слайд, то будет подсвечиваться вторая кнопочка.
В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.
Логика выделения текущего элемента проста:
Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.
При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.
Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.
Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:
Document.getElementById("cq-popup-bg").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove();
JavaScript слайд шоу на базе разработанной библиотекиИногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.
На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.
SlideShow: function (timeout) { var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); }, timeout); }
Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.
Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().
Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.
Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):
Self.slideShow(2000);
После этого проверяйте работу JavaScript слайдера, не забыв при этом почистить и браузера.
По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.
В итоге, у нас получилось JS слайд шоу, в котором слайды переключаются автоматически и по кругу, т.е. при достижении последнего слайда шоу переходит на новый цикл, и показ снова начинается с самого первого элемента.
При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.
Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.
В итоге, получился следующий код, который я решил не оформлять отдельным методом:
ClearInterval(self.slideCycle);
И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:
Link.addEventListener("click", function (e) {...}); self.prevBtn.addEventListener("click", function (e) {...}); self.nextBtn.addEventListener("click", function (e) {...});
Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.
Интеграция JavaScript слайдера на сайтИтак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.
Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.
Шаг 1
. Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2
. Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:
Шаг 3 . Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:
Var aSlider = new Slider("#slider");
Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.
Добавление новых слайдов в JavaScript карусельЗдесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides , то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.
А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper :
Text
В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).
Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav , прописав его в самом конце:
Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.
Упаковка JS карусели в единый скриптВсё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится 🙂
Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.
К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.
Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.
Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.
Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.
Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.
Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.
Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.
Схематично код выглядит следующим образом:
/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */ document.addEventListener("DOMContentLoaded", function(){ var str = "\ \ /*css код*/ \ /* html код */ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Поскольку в моём случае вариант загрузки файлов на сервер был вообще закрыт, мне пришлось загрузить файлы картинок элементов управления JavaScript каруселью на облако и вместо путей к ним в HTML и CSS коде прописать ссылки, сгенерированные при сохранении.
Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.
Самописный JS слайдер — перспективы развитияЧестно скажу, что заниматься целенаправленной поддержкой и развитием созданного мною решения я заниматься не планирую 🙂 На данный момент подобных слайдеров существует вагон и маленькая тележка, которые, в отличие от моего имеют свою историю, тщательно оттестированы и поддерживаются обширным комьюнити пользователей и разработчиков.
Мне же начинать весь этот путь с нуля в одиночку и создавать ещё один велосипед как-то не интересно, да и времени на это толком нет. Но, зато данный JavaScript слайдер является отличной возможностью попрактиковаться в разработке путём рефакторинга его кода и реализации новых интересных функций, которых, возможно, на данный момент ещё нет.
Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.
Если вы хотите прокачать свои фронтэнд скилы на моём творении, могу вам даже подкинуть небольшой список правок и доработок, в которых нуждается код и которые, возможно, будут интересны вам в плане их реализации:
Приведённый мною список правок, естественно, не конечный и может быть дополнен. Пишите о своих предложениях, мыслях и пожеланиях в комментариях под статьёй и делитесь со своими друзьями через социальные сети, чтобы их также привлечь к разработке.
Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.
Вступайте в сообщества проекта, подписывайтесь на обновления и можете даже помочь мне материально с помощью формы прямо под самой статьёй, если я чем-то смог вам помочь или вам просто нравится то, чем я занимаюсь 🙂
У меня всё! Всем добра! 🙂
P.S. : если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.
Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP , OpenCart , WordPress , Laravel , Yii , MySQL , PostgreSQL , JavaScript , React , Angular и другими технологиями web-разработки.
Опыт разработки проектов различного уровня: лендинги , корпоративные сайты , Интернет-магазины , CRM , порталы . В том числе поддержка и разработка HighLoad проектов . Присылайте ваши заявки на email [email protected] .
