Как сделать слайдер на javascript
Обучение веб-разработке на практике: пишем слайдер на JavaScript
Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:
Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.
Что понадобится?
Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами
Touch slider на JavaScript
Когда я начинал изучать JavaScript, мне очень хотелось понять как работают и делаются слайдеры, которые можно перелистывать свайпами или мышью, но материалов с хорошим объяснением именно того, что мне надо, я не нашел. Через какое-то время мне удалось сделать нечто подобное. И теперь я хочу написать об этом статью, чтобы другим людям, которые хотят понять как это все работает и сделать touch события для слайдера (и не только), было проще разобраться. Я постараюсь излагать по порядку и подкреплять объяснения наглядными примерами.
Я не считаю себя большим специалистом в JavaScript, всегда есть чему учиться, поэтому если знаете как написать какие-то фрагменты кода лучше/проще/эффективнее — обязательно напишите в комментарии.
Можно сразу посмотреть пример.
1. Какой функционал будем делать?
Напишем с 0 простенький слайдер, который будет иметь следующие функции:
Звучит совсем просто и я постараюсь писать тоже просто и понятно.
Если кому-нибудь будет интересно, то мы можем добавлять потом какой-то функционал, вроде точек-переключателей, бесконечной прокрутки слайдов, вертикальной ориентации, переключение слайдов с помощью клавиатуры и т.д. В конце концов можно завернуть в компонент. Напишите об этом в комментарии. Если будет хотя бы несколько комментариев за какой-то функционал, то реализуем его.
2. Пишем HTML и CSS
Что должен представлять из себя слайдер с точки зрения HTML и CSS?
Видимая часть слайдера (1 слайд) будет размером 200х200 пикселей. Снизу расположим стрелки-переключатели слайдов.
В итоге у нас будет вот это:
Для бо́льшей простоты все размеры будут установлены через CSS.
HTML будет выглядеть так:
← и → это спецсимволы HTML-разметки, которые представляют собой стрелки, направленные в левую и правую сторону соответственно.
И выглядеть это будет так:
Без overflow: hidden :
С этим просто, теперь перейдем к обсуждению логики работы слайдера.
3. Как это будет работать?
Со свайпами посложнее, разберем подробнее.
Мы будем использовать три основных события в браузере. При касании пальцем срабатывает событие touchstart (при зажатии мыши mousedown ), при движении пальцем по экрану — touchmove ( mousemove ), при отпускании пальца — touchend ( mouseup ).
Нам нужно будет работать с координатами курсора event.clientX (место касания экрана) следующим образом:
Таким образом, при движении пальцем по экрану, мы каждый раз считаем смещение курсора по оси X, относительно его предыдущего положения и переменная posX2 всегда будет содержать количество пикселей, на которое мы сдвинули палец по экрану. Обычно это число от 0.5 до 10, в зависимости от размаха (если двинуть палец очень резко, то будут бо́льшие числа, а если палец двигать медленно, то меньшие).
При прекращении свайпа, мы вычитаем из начальной позиции курсора текущую и сравниваем полученное значение ( posFinal ) со значением «порога» сдвига слайда ( posThreshold ), который мы определим заранее.
Разберем подробнее с примерами. Некоторые действия мы пока опустим. Они не столь важны для этого объяснения, рассмотрим только самые основные:
Если со вторым условием else более-менее понятно, то с первым нужно разобраться подробнее.
Надеюсь у меня получилось объяснить правильно и понятно. Теперь приступим к написанию JavaScript.
4. Пишем JavaScript
Ниже я опишу кратко алгоритм еще раз, но помимо основного алгоритма работы слайдера, будет еще не мало разных условий для «фиксов» не нужного нам поведения, которое будет приводить к разным странностям, либо будет ломать слайдер. Сначала мы сделаем просто переключение слайдов свайпами, а фиксить будем уже потом. Я постараюсь делать все объяснения и приводить примеры, сохраняя всю последовательность.
Кратко об основном еще раз:
Полная версия кода без разрывов на пояснения будет снизу.
Полная версия кода с фиксами нежелательного поведния еще ниже
Первым делом получим наши элементы со страницы. При такой очевидной HTML-разметке хорошим вариантом было бы получить элементы через один querySelector и свойства DOM, но для простоты возьмем все через querySelector. Также объявим все нужные для работы переменные и основную функцию, которая будет переключать слайды. Пояснение я дам ниже.
Теперь надо сделать переключение стрелками. Привязываем обработчик событий клика на блок со стрелками, проверяем на какой из них произошел клик и вызыаем функцию переключения слайдов.
Теперь слайдер будет переключаться и с помощью стрелок. Обработчики событий снизу привязывают начальные функции на слайдер.
Итого
И вот слайдер полностью работает. Слайды перелистываются tocuh событиями, drag событиями и стрелками-переключателями. Но есть еще некоторое поведение, которое может его сломать, посмотрим на примерах ниже:
В этом случае нужно отслеживать координаты курсора и по оси Y, затем разрешать или запрещать свайп, в зависимости от того какое действие мы совершаем (свайп слайдера или скролл страницы).
В этом случае нужно на первом и последнем слайде отслеживать в какую сторону мы тянем слайд и завершать работу функции, если на первом слайде мы тянем вправо, а на последнем слайде тянем влево.
Для исправления этого поведения нужно объявить переменную allowSwipe и регулировать ей запрет свайпа.
Описывать это подробно я уже не буду. Просто выложу этот код ниже.
И в примере все эти условия уже будут сделаны. Также для наглядности меняется курсор на слайдере.
Адаптивный слайдер на чистом javascript
Иногда нужно дополнить дизайн сайта, где как раз переменятся функциональный слайд, который в дальнейшем становится неотъемлемая часть сайта. Которая может стать оригинальным украшением, где также рассматривается информативным блоком. То в таком случай этот слайдер станет наилучшее решение для сайта
Где присутствуют простые и не сложные переходы слайдов, что не позволят напрягать взор посетителя к представленному материалу, где выставляется вид снимка, и го центру уже по своему усмотрению моно выставить ключевое слово, а также кратко все по тематике описать. Здесь мы получаем отзывчивый слайд, который отлично и корректно смотрится на большой мониторе, и на небольшой мобильном экране.
Так смотрится при открытие портала или страницы:
Здесь уже рассматриваем как мобильные посетители:
Аналогично, но с меньшим экраном по размеру:
Создание слайдеров с анимированной прокруткой, используя Javascript
В этой статье я хотел бы поделиться своими практическими наработками в создании анимированных слайдеров, используя JavaScript.
Идея слайдера заключает в том, что он может содержать в себе немалое количество информации, имея при этом довольно компактные размеры и предоставляя удобный способ просмотра находящихся в нём данных.
Совсем недавно, выполняя работу по вёрстке, мне необходимо было сделать блок ленты новостей с плавной прокруткой заголовков вправо/влево (при нажатии соответствующих кнопок). Для решения этой задачи я написал довольно простой скрипт, реализующий анимацию прокрутки.
Не знаю почему, но тема со слайдерами меня очень заинтересовала, поэтому в своё свободное время я продолжил работу в этом направлении. В результате, после ряда тестов, программная реализация анимации прокрутки была значительно улучшена.
Результатом моей работы является небольшой скрипт, подключаемый к странице, на которой расположен слайдер (или несколько слайдеров).
Всё, что необходимо для того, чтобы слайдер заработал, — создать соответствующий объект, передав в его конструктор идентификатор блока, в котором расположены слайды, и прописать в обработчиках событий контролов, инициирующих прокрутку, вызов соответствующих методов созданного объекта.
Вот как это выглядит на практике:
Рабочий пример доступен по этому адресу. Также есть версия в архиве.
Требования к структуре и стилевому оформлению слайдера будут подробно описаны далее в статье. Они несложные, но их выполнение необходимо для правильной работы механизма анимации прокрутки.
Структура и стилевое оформление
За основу я возьму приведённый выше пример, в котором слайдер имеет такой вид:
Раскроем внутреннее устройство слайдера (установив свойство overflow блока sample-slider и списка slides в visible) и определим требования к структуре и стилевому оформлению:
И так, слайды должны быть представлены в виде элементов упорядоченного или неупорядоченного списка и позиционироваться друг за другом горизонтально слева на право.
Первый элемент списка — особый. Он не видим для пользователя, однако анимация прокрутки слайдов реализуется за счёт манипуляций с шириной этого элемента.
Список вкладывается в блок слайдера. Его размеры должны быть подобраны таким образом, чтобы в одной горизонтальной линии (клиентской области списка) помещалось как минимум число слайдов, на одно большее количества отображаемых слайдов, плюс первый невидимый элемент списка. Так, в моём примере в слайдере отображается три элемента, а во вложенном списке — пять (четыре слайда плюс первый особый элемент).
Сам же список должен быть смещён влево, чтобы полностью скрыть первый элемент с левой стороны, и как минимум один слайд — с правой.
Это делается для того, чтобы во время прокрутки уходящий слайд постепенно исчезал, а приходящий — постепенно появлялся.
Последнее, но очень важное требование, относится к стилевому оформлению первого элемента в списке слайдов. Он не должен содержать с правой и с левой сторон внутренние отступы и рамку, а его размер необходимо подобрать таким образом, чтобы, при обнулении ширины этого элемента, первый слайд полностью уходил влево, а второй — становился на место первого.
Программный интерфейс
Рассмотрим конструктор объекта Slider. В качестве обязательного аргумента он принимает идентификатор блока, в который вложен список со слайдами.
Также помимо обязательного, конструктор может принимать ещё два опциональных аргумента, определяющих плавность и скорость прокрутки: shift и delay.
В итоге, функция-конструктор имеет такой вид:
Ниже приведён список методов объекта Slider (в алфавитном порядке):
| Метод | Описание |
|---|---|
| getIdentifier | Возвращает идентификатор HTML-элемента (слайдера), с которым связан данный объект. |
| getMaxShiftDelay | Возвращает максимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. |
| getMaxShiftOffset | Возвращает размер (в пикселях) максимального смещения слайдов за один этап цикла анимации прокрутки. |
| getMinShiftDelay | Возвращает минимальную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. |
| getMinShiftOffset | Возвращает размер (в пикселях) минимального смещения слайдов за один этап цикла анимации прокрутки. |
| getMoverWidth | Возвращает текущую ширину (в пикселях) первого элемента в списке. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| getShiftDelay | Возвращает установленную временную задержку (в миллисекундах) перед началом нового этапа цикла анимации прокрутки. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| getShiftOffset | Возвращает размер (в пикселях) установленного смещения слайдов за один этап цикла анимации прокрутки. Используется в основном описанными в прототипе функциями, осуществляющими прокрутку слайдов. |
| slideLeft | Перелистывает слайды таким образом, что новый слайд появляется с левой стороны (т.е. фактически слайды смещаются вправо, чтобы новый контент появился слева). |
| slideRight | Перелистывает слайды таким образом, что новый слайд появляется с правой стороны (т.е. фактически слайды смещаются влево, чтобы новый контент появился справа). |
Обратите внимание, что, если необходимо изменить значения по-умолчанию, определяющие плавность и скорость анимации прокрутки слайдов (offset и delay), необходимо передать соответствующие параметры в конструктор объекта.
Результаты тестирований
Делаем слайдер на JavaScript своими руками
Всем привет! 🙂
Поскольку я работаю Fullstack PHP разработчиком, то иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю 🙂
О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично 🙂
Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.
Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.
Поскольку мои возможности были ограничены, я остановился на разработке слайдера для сайта на HTML, CSS JS с нуля без каких-либо сторонних библиотек, чем и решил поделиться с вами в сегодняшней статье.
Как сделать 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 карусели картинок, которая в моём случае выглядит так:
Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:
В результате применения данных стилей JS карусель выглядит следующим образом:
И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.
Кроме того, многие ещё любят минимизировать JS для ускорения загрузки сайта. Так что кастомизировать данное решение при указанных условиях было бы очень сложно.
В итоге, я решил просто подключать готовые файлы в главном файле библиотеки popupSlider.js, который для моей постановки задачи принял следующий вид:
Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.
Конструктор определяется с помощью следующей конструкции:
Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.
Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:
Вызываться за пределами тела класса они будут следующим образом:
А внутри самого кода класса доступен следующий способ:
Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:
Вроде обо всех нюансах написания кода я рассказал. Теперь пару слов о методах нашего JavaScript класса, внутри которых содержатся описания действий JS карусели картинок.
loadStatic()
Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.
Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны подключаться CSS файлы стилей.
Далее мы делаем то же самое для файла с 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, а в какой-то конкретный контейнер, то можете вместо следующего кода:
Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):
init()
Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.
В конце вызывается метод navigate().
navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.
Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.
При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.
slide(element)
Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.
В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.
Само переключение слайдов работает следующим образом:
В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.
setCurrentLink(link)
Данный метод нашего класса JavaScript слайдера отвечает за подсветку навигационной круглой кнопки, соответствующей текущему элементу. Т.е. если у нас выбран второй слайд, то будет подсвечиваться вторая кнопочка.
В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.
Логика выделения текущего элемента проста:
close()
Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.
При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.
Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.
Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:
JavaScript слайд шоу на базе разработанной библиотеки
Иногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.
На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.
Для автоматической прокрутки слайдов я добавил в самый конец своего класса следующий метод:
Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.
Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().
Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.
Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):
После этого проверяйте работу JavaScript слайдера, не забыв при этом почистить кэш сайта и браузера.
По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.
В итоге, у нас получилось JS слайд шоу, в котором слайды переключаются автоматически и по кругу, т.е. при достижении последнего слайда шоу переходит на новый цикл, и показ снова начинается с самого первого элемента.
При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.
Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.
В итоге, получился следующий код, который я решил не оформлять отдельным методом:
И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:
Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.
Интеграция JavaScript слайдера на сайт
Итак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.
Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.
Шаг 1. Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2. Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:
Шаг 3. Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:
Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.
Добавление новых слайдов в JavaScript карусель
Здесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides, то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.
А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper:
В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).
Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav, прописав его в самом конце:
Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.
Упаковка JS карусели в единый скрипт
Всё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится 🙂
Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.
К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.
Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.
Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.
Так вот, в завершение своего сегодняшнего повествования я решил поделиться с вами финальной версией своей JavaScript карусели, которую я использовал на практике. Возможно, кому-то данный способ будет полезен. Он также пригодится тем, кто будет подключать предоставленную мною библиотеку через системы сборки Webpack, Gulp, Grunt и при этом столкнётся с проблемой правильности файловых путей.
Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.
Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.
Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.
Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса 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 cccpblogcom@gmail.com.
И с друзьями не забудьте поделиться 😉