В этой статье мы разберем процесс разработки слайдера на чистом JavaScript.
После, вы можете использовать слайдер в своих проектах и оформлять его как вам захочется. Ссылку на исходники я размещу в конце статьи.
Слайдер будет состоять из трех слайдов (можно делать их хоть сколько). Переключаться слайды будут с помощью стрелок, а содержать он будет изображение, кнопку и заголовок с описанием, в принципе контент можно размещать любой, главное правильно все сделать.
HTML разметка
Пишем разметку нашего слайдера:
- slider - основной контейнер;
- item - контейнеры слайдов;
- <a class="previous"> и <a class="next"> - стрелки переключения слайдов;
- <a class="previous_mobile"> и <a class="next_mobile"> - стрелки переключения слайдов для мобильных устройств.
Внутри контейнеров <item> располагается контент: заголовок, подзаголовок, кнопка и изображение.
На каждую ссылку - стрелку переключения слайдов, мы вешаем событие onclick, чтобы дать понять JavaScript, какое именно событие мы хотим отслеживать.
JavaScript код
Ниже, внутри тега <script>, пропишем JavaScript код, который будет отвечать за саму функцию переключения слайдов:
На каждую запись и функцию я прописал объяснение, надеюсь здесь все будет понятно.
Со строки 7 по строку 14, мы создаем функции nextSlide и previousSlide, которые вписали в событие onclick на стрелках переключения слайдов.
Давайте теперь разберемся со стилями.
CSS слайдера
Стили я размещаю в отдельном файле style.css, который подключен внутри тега <head>.
Что-то особенное в плане стилизации я делать не буду, просто придадим нашему слайдеру структурированный и понятный вид.
Результат
Если вы сделали все так, как у меня, то должно получится вот так:
Слайдер при уменьшении экрана до размера мобильных устройств:
Вот такой простой слайдер получился. Со стилями можете подстраивать под себя и свой проект.
Исходники слайдер: Slider vanilla JS (codepen.io)
Спасибо за внимание!