Вы здесь: Главная » Bootstrap » Использование слайдера (карусели) в Bootstrap 4

Использование слайдера (карусели) в Bootstrap 4

В Bootstrap 4, как и в Bootstrap 3, существует стандартный JS-компонент Carousel (карусель или слайдер). Этот компонент предназначен для циклического пролистывания изображений или другого контента.

В этой статье мы рассмотрим такие вопросы, связанные с созданием, форматированием и кастомизацией слайдера (карусели) в Bootstrap-4.

Работа карусели предусматривает использование CSS3 3D трансформаций вместе с JS-кодом. Поэтому для того, чтобы подключить компонент карусели, необходимо, чтобы в разметке вашего html-файла обязательно были подключены не только bootstrap.css, но и jQuery, и bootstrap.min.js. Popper.js вы можете не подключать.

Сам код слайдера предполагает, что вы добавляете ряд изображений.  Каждое изображение находится в <div class="carousel-item">. Обязательно для одного из таких div-ов (чаще всего для первого) задать класс active, чтобы слайдер отобразился.Если вы этого не сделаете, слайдер не будет показан на странице.

Для того чтобы изображения подгонялись под размер контейнера, официальная документация рекомендует добавить классы d-block и w-100.

Управление каруселью с помощью стрелок

Эти изображения можно перелистывать с помощью стрелок, которые добавляются в нижнюю часть карусели в виде ссылок с классами carousel-control-prev и carousel-control-next.

Важным моментом здесь является использование id слайдера в атрибуте href тега <a class="carousel-control-prev"> и <a class="carousel-control-next">. В примере ниже id слайдера sliderBigImages, и в атрибуте href записан код href="#sliderBigImages":

Если id слайдера и href ссылки будут отличаться, перелистывание не сработает.

Пример такой карусели:

Управление каруселью с помощью индикаторов

Для слайдера вы можете добавить управление с помощью индикаторов, которые выглядят, как небольшие полоски внизу слайдера. Можно добавить их как вместе со стрелками, так и как самостоятельный элемент управления. Индикаторы создаются с помощью нумерованного списка с классом "carousel-indicators". В каждом элементе <li> этого списка нужно добавить атрибут data-slide-to="цифра" (цифры начинаются с 0). Количество элементов <li> должно совпасть с количеством слайдов. Тот элемент, который показывается первым, имеет class="active".

Например, вы можете использовать такой код:

Как и при управлении стрелками, необходимо связать id слайдера с атрибутом data-target каждого элемента <li>. В примере выше id="skySlider" слайдера использован в data-target="#skySlider".

Ниже вы найдете 2 примера слайдера с индикаторами. Код этих примеров можно скопировать, нажав на заголовке.

Тестировать пример в новой вкладке.

Для большей информативности вы можете использовать специальный блок с заголовками и надписями в своем слайдере. Для этого предназначен класс .carousel-caption. Размещать его следует внутри  <div class="carousel-item"> для тех слайдов, которые должно сопровождать описание. Bootstrap-4 рекомендует вставить такой код:

Обратите внимание на классы утилит отображения d-none и d-md-block, которые будут скрывать надписи (d-none) для всех экранов, кроме средних и больших (d-md-block).

В примере ниже для заголовков разных слайдов использованы теги <h2>, <h3> и рекомендуемый <h5>, чтобы вы могли увидеть разницу в размерах текста. В реальном слайдере, как правило, вы будете создавать одинаковую разметку для всех изображений-слайдов.

Слайдер с эффектом исчезновения (fade)

Обычно слайдер имеет эффект перелистывания. Однако Bootstrap-4 позволяет создать карусель со сменой изображений с постепенным исчезновением (fade). Для этого нужно добавить класс class="carousel slide carousel-fade" для основного div-а с каруселью. Код слайдера в этом случае выглядит таким образом:

В примере есть управление как стрелками, так и индикаторами. Примечателен этот пример еще тем, что в нем использованы фото одного размера по ширине, но разные по высоте. Поэтому в какой-то момент слайдер "прыгает", а вместе с ним "прыгает" и контент ниже слайдера. Не стоит использовать такие изображения на реальном сайте. Лучше потратьте время на их обрезку в Photoshop.

Возможно, вы обратили внимание на то, что слайдеры в разных примерах имеют большие или меньшие отступы. Как правило, слайдер занимает либо вcю ширину страницы, либо "упаковывается" в <div class="container"> для того, чтобы занимать пространство, в котором, как правило, размещаются колонки с основным содержимым сайта, основанного на сетке Bootstrap 4. Например, вы можете использовать такой код:

Для уменьшения места для слайдера можно использовать классы типа col-lg-* или col-md-*, а также любые другие, основанные на сетке Bootstrap. Например, такая разметка выделит половину пространства контейнера для слайдера:

Несколько вариантов карусели с разной разметкой и размерами вы можете посмотреть по ссылке в новом окне/вкладке.

Затемнение изображений для слайдеров

Вы, должно быть уже заметили, что элементы управления слайдера и заголовок с текстом имеют по умолчанию белый цвет, поэтому должны хорошо читаться на темном фоне изображений слайдера. Далеко не все изображения имеют достаточный уровень контраста. Поэтому некоторые (а может, и все) картинки для слайдера придется затемнять. Для этой цели мы можем использовать Фотошоп.

В Adobe Photoshop вам нужно сделать такие действия после открытия в нем нужной картинки:

  1. Создать новый слой с помощью специальной иконки в палитре Слои (Layers, вызывается клавишей F7, чаще всего находится справа внизу).
  2. Залить его черным цветом (нажмите клавишу D на клавиатуре, чтобы сбросить цвета до значения по умолчанию - черного и белого). Для заливки нажмите клавиши ALT + Backspace.
  3. Для черного слоя уменьшить значение непрозрачности до 50-70% в зависимости от яркости картинки
  4. Объединить 2 слоя - черный и исходное изображение (Фон, или Background в Photoshop), нажав CTRL + E.
  5. Сохранить полученное изображение, нажав CTRL + S.

Последовательность действий можно также посмотреть на скриншоте.

Слой с затемнением

Использование карусели (слайдера) для раздела отзывов на странице

Довольно часто на посадочных страницах (Landing Page) используют раздел с отзывами клиентов в виде слайдера. Для него можно подключать какой-либо из сторонних плагинов, например, Flexslider, а можно использовать стандартный функционал бутстраповской карусели.

Как правило, в случае форматирования отзывов мы должны вывести фото автора отзыва, его имя и фамилию и текст самого отзыва. Для того чтобы сформировать разметку такого плана, нам не нужны большие изображения с подписями, которые мы рассматривали ранее. Нам нужны небольшие фото людей + текст, который довольно часто нужно разместить сбоку от фото. Поэтому в этом случае имеет смысл использовать классы сетки Bootstrap внутри классов карусели.

На этапе добавления этого кода мы получим такой слайдер:

Можно заметить, что он автоматически пролистывает отзывы клиентов, как и другие карусели Bootstrap-4, но ни стрелок, ни индикаторов, управляющих этим процессом заметить не получится. Вспомним, что по умолчанию они в Bootstrap имеют белый цвет, и тогда становится понятно, что мы просто не видим их на белом фоне body, хотя они существуют на странице. Выход из этой ситуации прост - нужно отредактировать классы для стрелок и индикаторов, заменив белый цвет на черный (или темно-серый, если вам он больше нравится или используется в других местах на странице).

Для кастомизации элементов управления карусели для отзывов запишем такой css-код:

После этого вы увидите и стрелки, и индикаторы. Обратите внимание на то, что стрелки сформированы с помощью svg-кода. Он был взят из свойств для соответствующих классов из Инспектора свойств (клавиша F12). Для изменения цвета svg-изображения, необходимо поменять параметр fill в свойстве background-image.

Код для svg-стрелок

Именно это мы и сделали, заменив буквы fff на 000. Такой простой операции достаточно, чтобы стрелки поменяли цвет.

Все приведенное выше вы можете не только посмотреть в примере ниже, но и отредактировать самостоятельно на ресурсе Codepen. Там же вы найдете media-query для преобразования слайдера при уменьшении размеров экрана.

See the Pen Bootstrap 4 Carousel by Elen (@ambassador) on CodePen.18892

Кастомизация стрелок

В предыдущем примере мы увидели, что для стрелок использован код svg-изображения. SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) - это и изображение, и код в одном флаконе. Поэтому мы можем самостоятельно нарисовать форму стрелок в любой программе для создания векторной графике (Adobe Illustrator, например, или в Inkscape), а затем сохранить их в формате svg.

Мы создадим в  Adobe Illustrator документ размером 45х45px и нарисуем с помощью 2-х линий стрелку. Затем перенесем ее в палитру Экспорт ресурсов и назовем prev. Выбираем для экспорта формат SVG, нажимаем на кнопку "Экспорт" и сохраняем в любую удобную папку.

Экспорт SVG из Adobe Illustrator

Код этого файла SVG таков:

Используем ресурс URL ecoder for SVG  для перевода кода SVG в подходящий для использования в свойстве background-image:

svg url encoderАналогичным способом сделаем стрелку вправо, отразив по горизонтали первую стрелку в Adobe Illustrator. И тоже преобразуем код файла в URL ecoder for SVG.

Результирующий CSS-код такой:

Итоговый слайдер с отзывами выглядим таким образом:

Ссылки на документацию Bootstrap:

3 комментария

  1. Спасибо. Пример с кастомными стрелками для бутстраповского слайдера - это то, что я искал

  2. Здравствуйте. А как сделать слайдер только на маленьких экранах? У меня есть div container, в нем блоки col-lg-3 col-md-4 col-ms-6 col-xs-12 , нужно чтобы на мобильных эти блоки отображались слайдером, а на больших оставались как есть друг за другом. Можно такое реализовать?

    • Добрый день.
      Вы могли бы выложить свой код со слайдером на какой-нибудь внешний ресурс с возможностью редактирования, например, на https://codepen.io или https://jsfiddle.net/, чтобы можно было точно понять, что вам нужно?
      Ссылку можно добавить сюда, в комментарии или прислать через форму на странице Контакты.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *