Обучение веб-разработке на практике: пишем слайдер на JavaScript
Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:
Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.
Что понадобится?
Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
- HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
- CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
- JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами <body></body> . Здесь всё просто: у нас есть основной блок (тег <div> ), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:
Обратите внимание, что у каждого тега <div> есть свой класс. Именно по этим классам будет применяться оформление CSS. В тегах <img> мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.
В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:
Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.
JavaScript
Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:
Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.
Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.
Готовый слайдер изображений
В финальной версии слайдера использовано несколько картинок, две кнопки с изменением фона при наведении курсора и плавная анимация перехода. Как видно из нашего примера, обучение веб-разработке может базироваться на практике: это не только пробуждает интерес, но и позволяет экспериментировать, улучшать, изменять функциональность компонентов на своё усмотрение, параллельно пополняя багаж знаний и навыков.
Теперь вы можете попробовать другие способы реализации, перейти к использованию дополнительных инструментов, таких как Bootstrap:
Слайдер liSlidik
На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.
Имя этого плагина запоминающиеся — liSlidik и проживает он здесь — liSlidik — jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.
Однако, я хотел разобраться с плагином liSlidik — понять, как его подключать, настраивать и управлять. Поэтому все же появился обзор этого слайдера, который будет представлен ниже.
Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.
Установка плагина liSlidik
Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце — js-файл с инициализацией скрипта и его настройками:
Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке — liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов — liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения — это кому как нравиться.
HTML-разметка для liSlidik
Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична — в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:
Единственный важный момент при создании HTML-разметки заключается в том, что для элемента необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik — иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента понадобиться для последующей стилизации слайдера на HTML-странице.
Инициализация скрипта liSlidik
Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:
Минимальная стилизация скрипта liSlidik
Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!
Минимальная CSS-стилизация слайдера liSlidik:
Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств и являются произвольными и зависят от конкретных условий — ставить нужно вместо них то, что необходимо. Это же относится и к , которое было применено здесь для “красоты”.
Вот теперь слайдер liSlidik готов к работе. Более того — он работает! Это минималистичный слайдер, без каких-либо кнопок управления:
Кнопки управления для liSlidik
Скрипт liSlidik имеет в своем составе полный набор органов управления создаваемым им слайдером. Начну с малого и приступлю к созданию кнопок перемотки взад-вперед для слайдшоу. Стоит сразу сказать, что все органы управления показом слайдшоу в скрипте liSlidik не создаются автоматически — их нужно создавать вручную (данный факт мне также не совсем понравился):
HTML-разметка для кнопок перемотки создается через элемент , у которого обязательным атрибутом должен быть , где — это имя идентификатора нашего слайдера. Классы и присутствуют для тех же целей, что и в элементе — на них “вешаются” CSS-стили:
Смотрим результат подключения кнопок перемотки в liSlidik:
Пагинация в слайдере liSlidik
Подключение пагинации в скрипте liSlidik выполняется аналогично — нужно вручную создать блочный элемент с атрибутом и классом (который также обязателен в данном случае!):
Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):
Присутствующее в коде выше имя класса обозначает активный элемент, который можно стилизовать на свой выбор. Еще один странный момент, связанный со слайдером liSlidik — внимательно посмотрите на снимок работающего скрипта:
Ничего не замечаете? Нумерация в данной пагинации начинается с нуля! Это весьма странный факт, ибо обычные посетители сайта не являются программистами и для них нумерация с нуля, мягко выражаясь, непривычна и необычна.
Заголовок слайдера liSlidik
Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента , для которого прописывается атрибут с обязательным именем класса :
И произвольные CSS-стили для него:
Текст для показа на странице скрипт liSlidik берет из содержимого атрибута для элемента . Поэтому не забудьте его прописать в своей HTML-разметке!
Миниатюры в скрипте liSlidik
Плагин liSlidik имеет возможность создания миниатюр в виде галлереи изображений, которая выступает в роли пагинации. На странице демо-примеров показан вариант такого слайдшоу. Однако, у меня не было желания разбираться с вопросом построения в этом примере.
Заключение
Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта — liSlidik — jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Реализация слайдера изображений и текста на React.js с вариантами оптимизации
В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений.
За последние 5 месяцев на моем счету 15 очных собеседований и предложения от Google, Roku, Microsoft и других компаний.
Суть задачи — реализовать виджет за 45–50 минут и рассказать о вариантах оптимизации. Ее решением мы займемся в данном руководстве. Главная цель не в том, чтобы реализовать слайдер изображений со множеством функциональностей, а в том, чтобы объяснить, как именно его реализовать и оптимизировать.
Требования
- показывать изображения кошек из API с ограничением размеров;
- отображать описание или название каждого изображения;
- обеспечивать перемещение между изображениями с помощью стрелок;
- допускать смену слайда при касании на мобильных устройствах;
- осуществлять переход на любой слайд;
- включать автоматическую смену слайдов ( Autoplay );
- предоставлять возможность настройки ширины и высоты слайдера;
- гарантировать отзывчивость слайдера;
- обеспечивать эффективную загрузку и быстрое отображение изображений слайдера.
Макет
Рендеринг в браузере
В первой и простой реализации мы выполняем рендеринг всех слайдов в браузере и отображаем только части в области просмотра (англ. viewport) или в элементе слайдера (когда задаем ширину или высоту). Эти решения загружают все изображения для всех слайдов и имеют N элементов DOM, где N — количество слайдов.
Архитектура компонентов
Реализация компонентов
Начнем с пропсов (англ. props) компонента слайдера, с помощью которых мы настраиваем слайдер:
В компоненте слайдера реализуем:
- загрузку изображений;
- метод для навигации по стрелкам (англ. arrows);
- метод для навигации по точкам (англ. dots);
- навигацию касанием;
- функциональность Autoplay ;
- рендеринг слайдов, стрелок и точек.
Сохраняем текущий номер слайда и загруженные изображения в локальном состоянии компонента. Во избежание подсчета пропсов и передачи их в другие компоненты через промежуточные рекомендуется использовать контекст (англ. Context), который предоставляет методы для смены слайдов и текущую информации о слайдере.
Стили компонента слайдера:
Как видно, архитектура слайдера содержит 3 компонента: SlideList , Arrows и Dots .
Имеются 2 стрелки: слева и справа.
Для стилизации стрелок с обеих сторон используем CSS.
Стили компонента Arrows :
По количеству слайдов отображаем нужное количество точек.
Каждая точка выглядит так:
Для отображения слайдов в SlideList можно получить элементы из контекста и выполнить рендеринг компонента Slide с ключами и данными о слайде.
Применяя в стилях transform и translateX , получаем нижепредставленную анимацию. От одного изображения слайда к другому перемещаемся по номеру слайда в массиве:
Компонент Slide включает 2 компонента: SlideImage и SlideTitle . Данная архитектура в перспективе позволяет добавлять новые функциональности для каждого слайда.
Варианты оптимизации
Предположим, что слайдер содержит много изображений и нуждается в оптимизации. Ее суть состоит в изменении анимации слайдов.
Возможны 2 варианта оптимизации.
- Одновременный показ 3-х слайдов.
- Показ только 1 слайда за раз.
Оптимизация с одновременным показом 3-х слайдов
Вы можете выбрать данный вариант оптимизации при желании использовать transform для смены слайдов.
В этом случае мы отображаем одновременно только 3 слайда: активный в середине, предыдущий и следующий. Объясняется это тем, что пользователь чаще всего нажимает на стрелки для перемещения на один слайд назад или вперед. При автоматической смене слайдов мы каждый раз перемещаемся вперед.
При переходе к предыдущему или следующему слайду мы определяем 3 новых слайда и отображаем их.
Оптимизация с показом 1 слайда
При намерении задействовать анимацию в CSS вы можете каждый раз отображать один слайд с информацией.
Пример возможных эффектов анимации:
Этот вариант оптимизации требует корректировки решения.
Теперь нет необходимости в компоненте SlidesList , и мы отображаем только один компонент Slide (строка 99).
Кроме того, устанавливаем управление эффектом анимации и применяем его только при изменении содержимого слайда (строка 41).
В качестве последнего изменения для улучшения пользовательского опыта предварительно загружаем изображения: предшествующее текущему слайду и следующее за ним (строка 25).
Компонент Slide для оптимизации с показом одного слайда:
В Slide вносится только одно изменение: он задействует класс с анимацией при смене слайда:
Реализация анимации fadeIn в стилях:
Дополнительные предложения по оптимизации
- Скорректировать размер изображения. Нет необходимости в разрешении Full HD для слайдера с ограниченным размером.
- Выбрать формат WebP для уменьшения размера изображений. Он сжимает на 20–30% лучше, чем jpg и png .
- Избегать изображений со 100% качеством. 70–85% качества выглядят также, как и 100%, но при этом размер изображений меньше.
- Уменьшить размеры исходного кода JavaScript и стилей.
- Использовать CDN для хранения изображений.
- Задействовать Brotli для сжатия.
Окончательный размер данных при Brotli-сжатии на 14–21% меньше, чем в случае Gzip.
Заключение
Реализация собственного слайдера изображений не требует специальных знаний. Потренируйтесь в его создании без опоры на интернет и за ограниченное время.
Как создать слайдер/карусель фото на Javascript
Здесь мы разберем с вами принцип работы слайдеров с фотографиями и как его реализовать на Javascript.
Суть работы слайдера достаточно простая, он состоит из двух основных частей — это контейнер (окно слайдера) и трек (лента с картинками), а далее мы берем трек и двигаем по одной оси в контейнере, тем самым часть фото отображается, а основные «обрезаются». Обрезка происходит с помощью свойства overflow:hidden.
Рассмотрим ниже готовую верстку, стили и скрипт слайдера.
index.hmtl — разметка слайдера
scripts.js — файл с кодом слайдера
На этом слайдер готов, остались вопросы, задавайте в комментариях и подписывайтесь на youtube-канал, там будет еще много видео по разработке и не только.
