Предыдущие мои статьи были не совсем полными. Я опускал много деталей. Эту статью сделаю развернутой, с примерами кода и с комментариями к нему. Сегодня мы напишем простой бесконечный слайдер без библиотек на чистом html, css + javascript. Полезно тем, кто начинает разбираться в основах веб разработки или хочет освежить память в написании базовых вещей. Ссылка на рабочий код в конце.
Буду писать поэтапно, поэтому советую налить себе чай, расслабиться и полностью погрузиться в чтение на 30-45мин. Налил себе чаек? Тогда приступим.
Пререквизиты
- Умение верстать
- Знания javascript на уровне переменных, селекторов и типов данных
Вот такой слайдер мы будем сегодня делать.
Слайдер состоит из 5 картинок, кнопок в виде стрелок, кружочков, которые показывают активность текущего слайда. Слайдер - это список из картинок. Каждая картинка занимает 100% ширины и высоты экрана, то есть список из 5 элементов явно больше ширины экрана, поэтому появится прокрутка. Чтобы избавиться от прокрутки мы оборачиваем список(ul) в блок(div) и ставим ему свойство overflow: hidden. В коде это выглядит вот так:
Теперь добавим common.сss к index.html.
Весь код закомментирован. Пройдитесь глазами по верстке, потому что дальше будет JavaScript код и нужно понимать, что у нас в разметке.
Важно обратить внимание на то, как мы будем создавать анимацию пролистывания. Мы будем двигать слайдер(.slider) на ширину картинки с помощью transform: translateX. Если у нас поменяются требования и будет не одна картинка в слайдере, а три, мы будем сдвигать на ширину трех картинок. Думаю, логика ясна.
Пишем логику на JS.
Прежде чем окунаться в код, сначала опишем алгоритм.
- При нажатии на стрелку справа, с помощью transform: translateX() мы двигаем слайдер влево. Поэтому в translateX у нас будет отрицательное значение. Еще, нам нужно сохранять значение, на которое мы сдвинули слайдер, поэтому нужно завести для этого отдельную переменную.
- При нажатии на стрелку слева, мы будем отнимать у созданной переменной ширину картинки и вставлять также в translateX. Так слайдер будем двигаться вправо.
- У нас еще есть точки, которые показывают на каком слайде мы сейчас находимся. Чтобы за этим следить, нам нужна переменная с числом. Когда мы нажимаем на стрелку справа, она будет увеличиваться, а когда на стрелку слева, уменьшаться.
Теперь напишем код. Главное - обращать внимание на комментарии.
Теперь подумаем. А что будет, если мы находимся на последнем элементе? Слайдер у нас сдвинется, а элементов у нас уже нет. Будет белый экран и куда нам двигать слайдер?
Тоже самое будет, когда мы будем находиться на первом элементе и нажмем на кнопку слева.
Первое решение - это заблокировать нажатие на правую кнопку, когда мы находимся на последнем элементе. Тоже самое сделать с кнопкой слева, когда мы находимся на первом элементе. Решение хорошее, но мы делаем бесконечный слайдер. Поэтому он должен автоматически переходить на первый или последний элемент, в зависимости, на какую кнопку мы нажали.
Чтобы решить эту проблему мы добавим "фиктивные" элементы. После последнего элемента добавим первый элемент для прокрутки влево, а перед первым добавим последний элемент для прокрутки вправо. Потом незаметно для пользователя поменяем translateX к "настоящему" элементу.
Теперь к коду. Побуду сегодня попугаем. Сейчас стоит обратить пристальное внимание к комментариям, так как это почти готовый код.
Слайдер крутится. Все работает, но если начнете нажимать кнопки очень быстро, вы заметите, что возникают баги. Активный кружок может не соответствовать видимому элементу. Происходит это, потому что анимация 300мс. Она еще не завершилась, а мы кликаем быстрее чем 300мс и срабатывает еще одна функция. Надо сделать так, чтобы функция по клику отрабатывала только после определенного времени. Это называется debounce.
Функцию debounce сейчас объяснять не буду, потому что это связано с асинхронностью, а это уже выходит за рамки статьи из серии для начинающих. Но в коде это напишу и вы можете увидеть полностью рабочий слайдер. Главное - это разобраться c кодом, который написан сверху.
Полезные ссылки
- Ссылка c кодом на GitHub: https://github.com/exoriri/slider-article
- Как сделать слайдшоу. Почти одно и тоже, что мы сегодня делали, только с другой анимацией и код чуть сложнее. https://www.w3schools.com/howto/howto_js_slideshow.asp
- Пример того как делается карусель. Очень похоже на то, что мы сегодня делали: https://learn.javascript.ru/task/carousel
И, ну, для очень любопытных:
Асинхронность - это когда второстепенная(асинхронная) функция работает параллельно с главной, но выполнится только после того, как выполнится главная.
#разработка #javascript #html #css #программирование
