Написать пост

Обучение веб-разработке на практике: пишем слайдер на JavaScript

Аватарка пользователя Марина Александровна
Марина Александровна
Отредактировано

Обучение веб-разработке даётся проще, если к теории подключена практика. Предлагаем попрактиковаться на слайдере без использования сторонних библиотек.

67К открытий70К показов

Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:

Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.

Что понадобится?

Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.

Пишем код

На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:

  • HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
  • CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
  • JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.

HTML

Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:

			<pre class="line-numbers"><code class="language-html"><!-- Указание типа текущего документа: -->
<!DOCTYPE html>
<html>

  <!-- Содержимое тега <head> не отображается на странице, помогает в работе с данными и хранит информацию для поисковых систем и браузеров: -->
  <head>
    <meta charset="utf-8" />
    <title>Устанавливает заголовок для окна веб-страницы</title>
  </head>

  <!-- Здесь содержится весь отображаемый контент: -->
  <body>
    <p>Текст</p>
    <img src="URL" alt="Изображение">
    <a href="URL">Ссылка</a>
  </body>
</html>

Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами <body></body>. Здесь всё просто: у нас есть основной блок (тег <div>), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:

			<!-- Основной блок слайдера -->
<div class="slider">

  <!-- Первый слайд -->
  <div class="item">
    <img src="https://media.tproger.ru/uploads/2020/07/field.jpg">
  </div>

  <!-- Второй слайд -->
  <div class="item">
    <img src="https://media.tproger.ru/uploads/2020/07/rose.jpg">
  </div>

  <!-- Третий слайд -->
  <div class="item">
    <img src="https://media.tproger.ru/uploads/2020/07/leaf.jpg">
  </div>

  <!-- Кнопки-стрелочки -->
  <a class="previous" onclick="previousSlide()">❮</a>
  <a class="next" onclick="nextSlide()">❯</a>
</div>

Обратите внимание, что у каждого тега <div> есть свой класс. Именно по этим классам будет применяться оформление CSS. В тегах <img> мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.

CSS

В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:

			/* Слайдер: */
.slider{
    max-width: 90%;
    /* Положение элемента устанавливается относительно его исходной позиции: */
    position: relative;
    /* Центрируем по горизонтали: */
    margin: auto;
    height: 300px;
}

/* Картинка масштабируется по отношению к родительскому элементу: */
.slider .item img {
    /* Элемент меняет размер так, чтобы заполнить блок и сохранить пропорции: */
    object-fit: cover;
    width: 100%;
    height: 300px;
}

/* Кнопки назад и вперёд: */
.slider .previous, .slider .next {
    /* Добавляет курсору иконку, когда тот оказывается над кнопкой: */
    cursor: pointer;
    /* Положение элемента задаётся относительно границ браузера: */
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    /* Оформление самих кнопок: */
    color: white;
    font-weight: bold;
    font-size: 16px;
    /* Плавное появление фона при наведении курсора: */
    transition: 0.6s ease;
    /* Скругление границ: */
    border-radius: 0 3px 3px 0;
}
.slider .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* При наведении курсора на кнопки добавляем фон кнопок: */
.slider .previous:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Анимация слайдов: */
.slider .item {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    /* Устанавливаем и изменяем степень прозрачности: */
    from {
        opacity: 0.4
    }
    to {
        opacity: 1
    }
}

Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.

JavaScript

Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:

			/* Устанавливаем стартовый индекс слайда по умолчанию: */
let slideIndex = 1;
/* Вызываем функцию, которая реализована ниже: */
showSlides(slideIndex);

/* Увеличиваем индекс на 1 — показываем следующий слайд: */
function nextSlide() {
    showSlides(slideIndex += 1);
}

/* Уменьшаем индекс на 1 — показываем предыдущий слайд: */
function previousSlide() {
    showSlides(slideIndex -= 1);  
}

/* Устанавливаем текущий слайд: */
function currentSlide(n) {
    showSlides(slideIndex = n);
}

/* Функция перелистывания: */
function showSlides(n) {
    /* Обращаемся к элементам с названием класса "item", то есть к картинкам: */
    let slides = document.getElementsByClassName("item");
    
    /* Проверяем количество слайдов: */
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
  
    /* Проходим по каждому слайду в цикле for: */
    for (let slide of slides) {
        slide.style.display = "none";
    }
    /* Делаем элемент блочным: */
    slides[slideIndex - 1].style.display = "block";    
}

Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.

Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.

Готовый слайдер изображений

В финальной версии слайдера использовано несколько картинок, две кнопки с изменением фона при наведении курсора и плавная анимация перехода. Как видно из нашего примера, обучение веб-разработке может базироваться на практике: это не только пробуждает интерес, но и позволяет экспериментировать, улучшать, изменять функциональность компонентов на своё усмотрение, параллельно пополняя багаж знаний и навыков.

Теперь вы можете попробовать другие способы реализации, перейти к использованию дополнительных инструментов, таких как Bootstrap:

Превью видео P3Nd-W0ZOPo

Или CSS Flexbox:

Превью видео ZAHVgl9YIH0

Можете попрактиковаться на слайдере посложнее, с дополнительными эффектами, опираясь на код из данного проекта:

Бэкенд и дополнительные функции

А если добавить к тому, что у нас получилось, бэкенд, можно с помощью API использовать изображения из других ресурсов, например Instagram, или хранить все картинки в своей базе данных, не опасаясь, что изображение удалят и внешняя ссылка станет неактуальной.

Но не практикой единой: не забывайте учить теорию, чтобы долго не буксовать на сложных задачах. Для этого подойдут книги или видео. Также хорошим способом совместить теорию и практику станут курсы веб-разработки с нуля. Например у GeekBrains как раз открыт набор для тех, кто заинтересован в обучении веб-разработке с трудоустройством. Обещают много практики и сразу полтора года опыта, которые можно добавить в резюме.
Следите за новыми постами
Следите за новыми постами по любимым темам
67К открытий70К показов
Также рекомендуем
ECMAScript 2024: что будет добавлено в стандарт
ECMAScript 2024: что будет добавлено в стандарт
Рассмотрели новые методы в ECMAScript 2024, которые планируют внедрить, и рассказали, зачем они нужны и как их будут использовать.
Обзор библиотеки types-spring
Обзор библиотеки types-spring
Улучшенные типы и дополнительные утилиты для разработки на typesctipt вместе с types-spring
🔥 PostgreSQL-сервер упаковали в JavaScript-библиотеку размером 3 МБ
🔥 PostgreSQL-сервер упаковали в JavaScript-библиотеку размером 3 МБ
PGlite — компактная JavaScript-библиотека на базе WebAssembly, позволяющая запускать полноценный сервер PostgreSQL прямо в браузере. Весит всего 3 МБ, поддерживает расширения, такие как pgvector, и упрощает разработку и тестирование приложений.
Дьявол в деталях: интерактивная карта на OpenLayers. Часть 2
Дьявол в деталях: интерактивная карта на OpenLayers. Часть 2
Рассказали, как сделать интерактивную карту на сайте с помощью JS-библиотеки OpenLayers: как добавить остановки и отслеживать юзеров.