Как сделать карусель в html
Обновлено: 05.07.2024
Карусели являются основным продуктом сайтов для потоковой передачи и электронной коммерции. Оба Amazon и Netflix используют их в качестве выдающихся инструментов навигации. В этом уроке мы будем оценивать дизайн взаимодействия и того, и другого, и использовать наши результаты для реализации идеальной карусели.
Часть 1 будет оценивать, как Amazon и Netflix реализовали прокрутку. Затем мы реализуем карусель, который можно прокручивать прикосновением.
К концу этой серии мы проведем прокрутку колес и тачпада, разбивку на страницы, индикаторы хода, навигацию по клавиатуре и некоторые незначительные штрихи с использованием весенней физики. Мы также будем подвержены некоторой базовой функциональной композиции.
Идеальный?
- Мышь. Он должен предлагать предыдущие и следующие кнопки, которые легко нажимать и не скрывать контент.
- Коснитесь (сенсорный ввод): он должен отследить палец, а затем прокрутиться с тем же импульсом, что и при падении пальца с экрана.
- Колесико прокрутки: Часто пропускается, Apple Magic Mouse и многие треки для ноутбука обеспечивают плавное горизонтальное прокручивание. Мы должны использовать эти возможности!
- Клавиатура. Многие пользователи предпочитают не использовать или использовать мышь для навигации. Важно сделать нашу карусель доступной, чтобы пользователи могли использовать наш продукт.
Наконец, мы сделаем еще один шаг вперед и сделаем это уверенным, восхитительным элементом UX, сделав карусель отчетливо и в явном виде с весенней физикой, когда ползунок достигнет конца.
Установка
Во-первых, давайте получим HTML и CSS, необходимые для создания рудиментарной карусели, разворачивая этот CodePen.
Перо настроено на Sass для предварительной обработки CSS и Babel для трансляции JavaScript ES6. Я также включил Popmotion, к которому можно получить доступ с помощью window.popmotion .
Вы можете скопировать код в локальный проект, если хотите, но вы должны убедиться, что ваша среда поддерживает Sass и ES6. Вам также потребуется установить Popmotion с npm install popmotion .
Создание новой карусели
На любой данной странице у нас может быть много каруселей. Поэтому нам нужен способ инкапсуляции состояния и функциональности каждого из них.
Я собираюсь использовать фабричную функцию, а не класс . Фабричные функции исключают необходимость использования часто путающего этого ключевого слова и упрощают код для целей данного руководства.
В своем редакторе JavaScript добавьте эту простую функцию:
Мы добавим код этой карусели в эту функцию карусели .
Способы прокрутки и для чего она.
Наша первая задача - сделать карусельный свиток. Мы можем сделать два способа:
Прокрутка собственного браузера
Очевидным решением было бы установить переполнение-x: прокрутка по ползунку. Это позволит использовать прокрутку на всех браузерах, включая сенсорные и горизонтальные устройства колесика мыши.
Однако есть и недостатки такого подхода:
- Содержимое вне контейнера не будет видно, что может быть ограничительным для нашего дизайна.
- Это также ограничивает способы использования анимаций, чтобы показать, что мы достигли конца.
- Настольные браузеры будут иметь уродливую (хотя и доступную!) Горизонтальную полосу прокрутки.
В качестве альтернативы:
Анимация translateX
Мы также могли бы анимировать свойство translateX в карусели. Это было бы очень универсально, поскольку мы могли бы реализовать именно тот дизайн, который нам нравится. translateX также очень эффективен, поскольку в отличие от свойства CSS left он может обрабатываться графическим процессором устройства.
С другой стороны, нам придется переопределить функциональность прокрутки с помощью JavaScript. Это больше работы, больше кода.
Как проложить прокрутку Amazon и Netflix?
Оба карусели Amazon и Netflix делают разные компромиссы в решении этой проблемы.
Тот, кто принял решение анимировать левый , а не translate X , должен быть настоящим идиотом (spoiler (прерыватель потока): это я, еще в 2012 году. В те дни мы не были такими просвещенными).
Netflix правильно анимирует свойство translateX carousel, и он делает это на всех устройствах. Это позволяет им иметь дизайн, который выходит за пределы карусели:
Это, в свою очередь, позволяет им придумывать дизайн, где предметы увеличены за пределами краев x и y карусели, а окружающие предметы перемещаются с пути:
К сожалению, повторная реализация прокрутки Netflix для сенсорных устройств неудовлетворительна: в ней используется система разбиения на страницы на жестов, которая кажется медленной и громоздкой. Кроме того, для горизонтальных колес прокрутки не учитывается.
Мы можем сделать лучше. Давайте сделаем код!
Прокрутка Как Pro
Наш первый шаг - захватить узел .slider . Пока мы на нем, давайте возьмем элементы, которые он содержит, чтобы мы могли определить размер ползунка.
Измерение карусели
Мы можем определить видимую область ползунка, измеряя его ширину:
Мы также хотим, чтобы общая ширина всех элементов содержалась внутри. Чтобы наша функция карусели была относительно чистой, давайте сделаем это вычисление отдельной функцией в верхней части нашего файла.
Используя getBoundingClientRect для измерения смещения слева нашего первого элемента и смещения справа от нашего последнего элемента, мы можем использовать разницу между ними, чтобы найти полную ширину всех элементов.
После измерения sliderVisibleWidth напишите:
Теперь мы можем определить максимальное расстояние, на которое должна прокручиваться карусель. Это общая ширина всех наших предметов, минус одна полная ширина нашего видимого слайдера. Это дает число, которое позволяет самому правому элементу выравниваться справа от нашего слайдера:
Благодаря этим измерениям мы готовы начать прокрутку нашей карусели.
Настройка translateX
Popmotion поставляется с рендерером CSS для простой и эффективной настройки свойств CSS. Он также имеет функцию значения, которая может использоваться для отслеживания чисел и, что важно (как мы вскоре увидим), запросить их скорость.
В верхней части вашего файла JavaScript импортируйте их так:
атем на линии после установки minXOffset создайте рендеринг CSS для нашего слайдера:
И создайте значение для отслеживания смещения x слайдера и обновите свойство translateX слайдера, когда оно изменится:
Теперь перемещение ползунка горизонтально так же просто, как и запись:
Сенсорная прокрутка
Мы хотим, чтобы наша карусель начала прокручивать, когда пользователь перетаскивает ползунок горизонтально и останавливает прокрутку, когда пользователь перестает касаться экрана. Наши обработчики событий будут выглядеть так:
В нашей функции startTouchScroll мы хотим:
- Остановите любые другие действия, включив slider (слайдер)X.
- Найдите точку касания начала.
- Прослушайте следующее событие touchmove , чтобы узнать, перетаскивается ли пользователь по вертикали или по горизонтали.
После document.addEventListener добавьте:
Затем нам нужно сохранить точку начала происшествия. Это позволит нам увидеть, куда пользователь перемещает свой палец дальше. Если это вертикальное движение, мы разрешим прокрутку страницы, как обычно. Если это горизонтальное движение, мы будем прокручивать слайдер.
Мы хотим поделиться этим touchOrigin между обработчиками событий. Итак, после let action; (действия;) Добавить:
Вернемся в наш обработчик startTouchScroll , добавьте:
Теперь мы можем добавить touchmove (прослушиватель) событий в документ , чтобы определить направление перетаскивания на основе этого touchOrigin :
Наша функция (определения) determeDragDirection будет измерять следующее местоположение касания, проверить, что она действительно переместилась, и если да, измерьте угол, чтобы определить, является ли он вертикальным или горизонтальным:
Popmotion включает некоторые полезные калькуляторы для измерения таких вещей, как расстояние между двумя координатами x / y. Мы можем импортировать таких:
Тогда измерение расстояния между двумя точками зависит от использования калькулятора расстояния :
Теперь, если касание переместилось, мы можем отключить этот прослушиватель событий.
Измерьте угол между двумя точками с помощью калькулятора угла :
Мы можем использовать это, чтобы определить, является ли этот угол горизонтальным или вертикальным, передавая его следующей функции. Добавьте эту функцию в самую верхнюю часть нашего файла:
Эта функция возвращает true , если заданный угол находится в пределах -90 +/- 45 градусов (прямо вверх) или 90 +/- 45 градусов (прямо вниз). Таким образом, мы можем добавить другое предложение возврата , если эта функция вернет true .
Отслеживание указателя
Теперь мы знаем, что пользователь пытается прокрутить карусель, мы можем начать отслеживать их пальцы. Popmotion предлагает действие указателя, которое выводит координаты x / y мыши или указателя касания.
Во-первых, указатель импорта:
Чтобы отслеживать сенсорный ввод, предоставьте исходное событие указателю :
Мы хотим измерить начальную позицию x нашего указателя и применить любое движение к слайдеру. Для этого мы можем использовать трансформатор под названием applyOffset .
Трансформаторы - это чистые функции, которые принимают значение и возвращают его - да-трансформируются. Например: const double = (v) => v * 2 .
applyOffset - это валютная функция. Это означает, что когда мы вызываем его, он создает новую функцию, которая затем может быть передана значение. Сначала мы вызываем его числом, которое мы хотим измерить смещение, в этом случае текущее значение action.x и число, чтобы применить это смещение к. В этом случае это наш sliderX .
Поэтому наша функция applyOffset будет выглядеть так:
Теперь мы можем использовать эту функцию в обратном вызове указателя, чтобы применить движение указателя к ползунку.
Остановка, со стилем
Карусель теперь перетаскивается прикосновением! Вы можете проверить это, используя эмуляцию устройства в Инструментах разработчика Chrome.
Он чувствует себя немного болтливым, не так ли? Возможно, вы столкнулись с прокруткой, которая кажется такой до этого: вы поднимаете палец, и прокрутка останавливается. Или прокрутка останавливается, а затем небольшая анимация захватывает продолжение прокрутки.
Мы не собираемся это делать. Мы можем использовать физическое действие в Popmotion, чтобы взять истинную скорость sliderX и применить к нему трение в течение продолжительного времени.
Во-первых, добавьте его в наш постоянно растущий список импорта:
Затем, в конце нашей функции stopTouchScroll , добавьте:
Здесь от и скорость устанавливаются с текущим значением и скоростью sliderX . Это гарантирует, что наше физическое моделирование имеет те же начальные начальные условия, что и перемещение движения пользователя.
Меньшие числа заставят его чувствовать себя легче, а большие числа сделают движение более тяжелым. Для движения с прокруткой я чувствую, что 0.2 ударяет хороший баланс между неустойчивым и вялым.
Границы
Но есть проблема! Если вы играете с новой карусели, это очевидно. У нас нет ограниченного движения, позволяющего буквально выбросить вашу карусель!
Есть еще один трансформатор для этой работы, зажим . Это также функция в карри, то есть, если мы назовем ее минимальным и максимальным значением, скажем 0 и 1 , она вернет новую функцию. В этом примере новая функция будет ограничивать любое число, присвоенное ему, между 0 и 1 :
Во-первых, импортный зажим :
Мы хотим использовать эту функцию зажима на нашей карусели, поэтому добавьте эту строку после определения minXOffset :
Мы собираемся изменить два выхода , которые мы установили в наших действиях, используя некоторую легкую функциональную композицию с трансформатором трубы .
труба
Когда мы вызываем функцию, мы пишем ее так:
Если мы хотим передать результат этой функции другой функции, мы можем написать следующее:
Это становится немного трудным для чтения, и это только ухудшается, когда мы добавляем все больше и больше функций.
С трубой мы можем создать новую функцию из foo и bar , которую мы можем использовать повторно:
Он также написан в естественном порядке начала -> завершения, что облегчает его выполнение. Мы можем использовать это, чтобы составить applyOffset и clamp в одну функцию. Импорт т рубы :
Замените обратный вызов вывода нашего указателя на:
И замените выходной обратный вызов физики :
Такая функциональная компоновка может довольно аккуратно создавать описательные, поэтапные процессы из меньших, многоразовых функций.
Теперь, когда вы тащите и бросаете карусель, он не сдвинется с места за пределы своих границ.
Резкая остановка не очень удовлетворяет. Но это проблема для более поздней части!
Вывод
Это все для части 1. До сих пор мы рассмотрели существующие карусели, чтобы увидеть сильные и слабые стороны различных подходов к прокрутке. Мы использовали отслеживание входных данных Popmotion и физику для того, чтобы наглядно анимировать наш перевод карусели translateX с сенсорной прокруткой. Мы также познакомились с функциональным составом и карриными функциями.
Компонент слайд-шоу для циклического перехода по элементам - изображениям или текстовым слайдам - например, карусели.
Как это устроено
Карусель - это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований CSS 3D и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущего / следующего элементов управления и индикаторов.
В браузерах, где поддерживается API видимости страницы, карусель будет избегать скольжения, когда веб-страница не видна пользователю (например, когда вкладка браузера неактивна, окно браузера свернуто и т.д.).
Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .
Имейте в виду, что вложенные карусели не поддерживаются, а карусели обычно не соответствуют стандартам доступности.
Примеры
В .active потребности класса , которые должны быть добавлены к одному из слайдов иначе карусель не будет видно. Также не забудьте установить уникальный идентификатор .carousel для дополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице. Элементы управления и индикаторы должны иметь data-target атрибут (или href для ссылок), соответствующий идентификатору .carousel элемента.
Только слайды
Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .w-100 на изображениях карусели, чтобы предотвратить выравнивание изображений по умолчанию в браузере.
В веб-дизайне карусель – это слайд-шоу для представления серии контента. Звучит безобидно, правда?
Но некоторые веб-дизайнеры любят слайдеры-карусели, а другие презирают их.
Это потому, что, если все сделано правильно, слайдер карусели может эффективно организовать серийный контент или несколько отдельных частей контента. Это также может повысить вовлеченность и улучшить взаимодействие с пользователем, позволяя посетителям быстро и легко перемещаться по этому контенту, особенно на мобильных устройствах.
Однако при неправильном использовании ползунки карусели приносят больше вреда, чем пользы. Например, автоматический слайдер может больше отвлекать, чем информативно. Слайдер с дрянной анимацией может сделать ваш сайт менее профессиональным. А плохо спроектированную карусель можно полностью не заметить, которая эффективно скрывает информацию на других слайдах от посетителей.
CSS-карусель
Есть два способа создать слайдер карусели для вашего сайта. Вы можете создать его с нуля, используя только HTML и CSS. Или вы можете использовать Bootstrap CSS, фреймворк, который предлагает заранее спроектированные компоненты, включая карусели, для ускорения процесса разработки кода.
Ниже мы подробно рассмотрим каждый процесс и рассмотрим пример сборки карусели для каждого.
Как сделать простую карусель в Bootstrap CSS
С помощью Bootstrap вы можете создать простую карусель, используя только HTML. Чтобы показать вам, как это сделать, мы разберем процесс создания карусели со слайдами и элементами управления. Он будет практически идентичен второму примеру в официальной документации Bootstrap, за исключением имени идентификатора.
Начнем с родительского элемента. Для начала вам понадобится элемент
. Обязательно дайте ему уникальное имя ID, чтобы вы могли применить дополнительные элементы управления позже. Это особенно важно, если вы добавляете несколько каруселей на одну страницу. Я назову этот пример SimpleCarouselExample.
Затем вы хотите определить элемент с помощью класса слайдов .carousel и добавить атрибут data-ride = "carousel", чтобы анимация карусели начиналась при загрузке страницы без необходимости каких-либо действий. Вот как выглядит наш HTML:
Теперь нам нужно разместить дочерние элементы внутри этого родительского элемента
. Допустим, нам нужно три изображения в карусели. Вот HTML для этих изображений с многоточием, выступающим в качестве заполнителя для конкретного источника изображения и альтернативного текста, который мы будем использовать.
Обратите внимание на наличие .d-block и .w-100. Эти классы предотвращают выравнивание изображений по умолчанию в браузере. В частности, .d-block – это значение свойства отображения в Bootstrap, которое делает элемент видимым на всех размерах экрана, а .w-100 – служебное значение ширины, которое делает элемент на 100% такой же ширины, как и его контейнер.
Нам нужно обернуть каждое из этих изображений в элемент
с классом .carousel-item, чтобы браузер знал, что они принадлежат карусели. Вот как это выглядит для первого изображения:
Примечание. Класс .active необходимо добавить на один из слайдов. Без этого класса карусель не будет видна.
Я собираюсь обернуть все эти элементы карусели в элемент
Теперь, когда я успешно создал карусель только со слайдами, пришло время добавить предыдущий и следующий элементы управления. Чтобы создать их, добавьте два элемента и определите их с помощью класса .carousel-control-prev-icon и класса .carousel-control-next-icon соответственно.
Обратите внимание на атрибуты ARIA. Мы объясним их через минуту, но сначала мы должны рассмотреть, что добавить, чтобы сделать дизайн доступным.
Собрав все вместе, вот HTML-код, который вам понадобится для создания простой карусели со слайдами и элементами управления:
Так будет выглядеть и вести себя карусель на интерфейсе вашего сайта. Обратите внимание, что он автоматически переходит к следующему слайду, если я ничего не делаю, но позволяет мне перемещаться вперед и назад при использовании параметров управления.
Вы можете найти другие примеры каруселей в официальной документации Bootstrap.
Карусельный слайдер на чистом CSS
Прежде чем мы погрузимся в пример сборки, важно понять, что для создания слайдера карусели на чистом CSS также требуется HTML. В конце концов, CSS – это язык стилей, поэтому вам понадобится HTML, чтобы было что стилизовать.
Теперь, когда у нас есть лучшее представление о терминологии и ценности мышления, ориентированного на CSS, давайте рассмотрим пример построения карусели только для CSS.
Допустим, вы хотите создать карусель с тремя слайдами. Затем вы должны создать три элемента
Теперь мы хотим убедиться, что пользователи могут прокручивать эти слайды вручную. Для этого мы собираемся установить для свойства overflow-x контейнера значение auto. Это обеспечивает механизм прокрутки для переполненных рамок или, в данном случае, слайд-шоу. Вот CSS:
Затем для каждого слайда в карусели мы собираемся установить ширину 100%, чтобы он охватил всю область просмотра по горизонтали, и установим высоту 300 пикселей. Мы также собираемся установить для свойства flex-shrink значение 0, чтобы слайды не сжимались и не оборачивались на небольших устройствах. Вот CSS:
Я просто собираюсь стилизовать свои три слайда, чтобы мы могли лучше их видеть, изменив цвет фона на синий, выровняв слайды и текст в центре контейнера и увеличив размер шрифта. Вот CSS:
Все вместе вот CSS:
Добавление слайдера карусели на ваш сайт
Ползунки карусели могут помочь вам эффективно использовать пространство и организовывать контент на вашем сайте, одновременно удерживая посетителей и давая им контроль над тем, как они читают ваш контент. Если они подходят для вашего сайта, вы можете использовать любой из описанных выше методов для создания слайдера карусели без Javascript. Вам просто нужно немного разбираться в HTML и CSS.
bootstrap
В данном уроке разберемся в том, как из стандартной bootstrap 4 карусели (слайдера), сделать карусель из нескольких элементов (Bootstrap 4 Multiple Item Carousel).
HTML разметка карусели
К примеру, мы хотим чтобы у нас на экране отображалось сразу 3 слайда, тогда разметка будет следующая
CSS код
JS код
На выходе получаем.
Если в вызове слайдов изменить col-4 на col-3.
Получим карусель из 4х колонок
Теперь сделаем карусель с немного другим подходом, чтобы по центру был основной слайд и по краям была половина следующего и предыдущего слайда.
html разметка
Css стили
На выходе получаем.
Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!
Хнык, а 2 разноплановые карусели не работают(( У меня еще 2 обычные бутстрап карусельки, и одна с буквами и картинкой, вторая просто слайдер и когда цепляешь стили и скрипт беда приходит, буквы на буквы накладываются(( Это я затупок или не получится на бутстрапе и надо слик какой нить второй цеплять или еще что?
Я бы OWL карусель лучше установил — особенно если слайдеров много разноплановых выводить)
На выходе, к сожалению, получился просто слайдер без половинок, скопировала весь код, что могло пойти не так?
Понятия не имею что у вас могло пойти не так. Смотрите демо — там все работает
пример и действительность не совпадают
Вы о чем? Можно подробнее?
О том что Вы наплужили с класами и idхами
Если вы уже делаете что то поезное так делайте это нормально.
А что вас не устраивает? Скиньте пример лучшей реализации! Я бутстрап карусель обычно из бутстрапа удаляю и подключаю за место нее OWL carousel 2.x, либо swiper — если сайт без Qwerty)
Здравствуйте, подскажите пожалуйста, а если надо 2 карусели на бутстрапе одна стандартная по одному слайду, вторая мульти, то как прописать стили и js?
id разные я сделала, карусели 2, но мульти не хочет делаться(( и если стили такие делать, то верхняя тоже реагирует))
Читайте также: