В Bootstrap 4, как и в Bootstrap 3, существует стандартный JS-компонент Carousel (карусель или слайдер). Этот компонент предназначен для циклического пролистывания изображений или другого контента.
В этой статье мы рассмотрим такие вопросы, связанные с созданием, форматированием и кастомизацией слайдера (карусели) в Bootstrap-4.
- Разметка шаблона
- Управление каруселью с помощью стрелок
- Управление каруселью с помощью индикаторов
- Слайдер с заголовками и надписями
- Слайдер с эффектом исчезновения (fade)
- Использование классов сетки Bootstrap-4
- Затемнение изображений для слайдеров
- Слайдер для отзывов на странице
- Кастомизация стрелок
Разметка шаблона
Работа карусели предусматривает использование CSS3 3D трансформаций вместе с JS-кодом. Поэтому для того, чтобы подключить компонент карусели, необходимо, чтобы в разметке вашего html-файла обязательно были подключены не только bootstrap.css, но и jQuery, и bootstrap.min.js. Popper.js вы можете не подключать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Пример Bootstrap-4 слайдера</title> </head> <body> <h1>Пример Bootstrap-4 слайдера</h1> <!-- здесь будет код слайдера --> <!-- подключение JavaScript --> <!-- Сначала jQuery, затем Bootstrap JS, а Popper.js подключать необязательно --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html> |
Сам код слайдера предполагает, что вы добавляете ряд изображений. Каждое изображение находится в <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":
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="sliderBigImages" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="nature/01.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/02.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/03.jpg" class="d-block w-100" alt="Природа"> </div> </div> <a class="carousel-control-prev" href="#sliderBigImages" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#sliderBigImages" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
Если id слайдера и href ссылки будут отличаться, перелистывание не сработает.
Пример такой карусели:
Управление каруселью с помощью индикаторов
Для слайдера вы можете добавить управление с помощью индикаторов, которые выглядят, как небольшие полоски внизу слайдера. Можно добавить их как вместе со стрелками, так и как самостоятельный элемент управления. Индикаторы создаются с помощью нумерованного списка с классом "carousel-indicators". В каждом элементе <li> этого списка нужно добавить атрибут data-slide-to="цифра" (цифры начинаются с 0). Количество элементов <li> должно совпасть с количеством слайдов. Тот элемент, который показывается первым, имеет class="active".
Например, вы можете использовать такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="skySlider" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#skySlider" data-slide-to="0" class="active"></li> <li data-target="#skySlider" data-slide-to="1"></li> <li data-target="#skySlider" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="nature/041.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/042.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/043.jpg" class="d-block w-100" alt="Природа"> </div> </div> <a class="carousel-control-prev" href="#skySlider" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#skySlider" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
Как и при управлении стрелками, необходимо связать id слайдера с атрибутом data-target каждого элемента <li>. В примере выше id="skySlider" слайдера использован в data-target="#skySlider".
Ниже вы найдете 2 примера слайдера с индикаторами. Код этих примеров можно скопировать, нажав на заголовке.
Тестировать пример в новой вкладке.
Слайдер с заголовками и надписями
Для большей информативности вы можете использовать специальный блок с заголовками и надписями в своем слайдере. Для этого предназначен класс .carousel-caption. Размещать его следует внутри <div class="carousel-item"> для тех слайдов, которые должно сопровождать описание. Bootstrap-4 рекомендует вставить такой код:
|
1 2 3 4 5 6 7 |
<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>...</h5> <p>...</p> </div> </div> |
Обратите внимание на классы утилит отображения d-none и d-md-block, которые будут скрывать надписи (d-none) для всех экранов, кроме средних и больших (d-md-block).
В примере ниже для заголовков разных слайдов использованы теги <h2>, <h3> и рекомендуемый <h5>, чтобы вы могли увидеть разницу в размерах текста. В реальном слайдере, как правило, вы будете создавать одинаковую разметку для всех изображений-слайдов.
Слайдер с эффектом исчезновения (fade)
Обычно слайдер имеет эффект перелистывания. Однако Bootstrap-4 позволяет создать карусель со сменой изображений с постепенным исчезновением (fade). Для этого нужно добавить класс class="carousel slide carousel-fade" для основного div-а с каруселью. Код слайдера в этом случае выглядит таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="sliderFade" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#sliderFade" data-slide-to="0" class="active"></li> <li data-target="#sliderFade" data-slide-to="1"></li> <li data-target="#sliderFade" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="nature/020.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/021.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/022.jpg" class="d-block w-100" alt="Природа"> </div> </div> <a class="carousel-control-prev" href="#sliderFade" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#sliderFade" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
В примере есть управление как стрелками, так и индикаторами. Примечателен этот пример еще тем, что в нем использованы фото одного размера по ширине, но разные по высоте. Поэтому в какой-то момент слайдер "прыгает", а вместе с ним "прыгает" и контент ниже слайдера. Не стоит использовать такие изображения на реальном сайте. Лучше потратьте время на их обрезку в Photoshop.
Использование классов сетки Bootstrap-4 для размещения карусели (слайдера)
Возможно, вы обратили внимание на то, что слайдеры в разных примерах имеют большие или меньшие отступы. Как правило, слайдер занимает либо вcю ширину страницы, либо "упаковывается" в <div class="container"> для того, чтобы занимать пространство, в котором, как правило, размещаются колонки с основным содержимым сайта, основанного на сетке Bootstrap 4. Например, вы можете использовать такой код:
|
1 2 3 4 5 6 7 |
<div class="container"> <div id="sliderImages" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> ... </div> </div> </div> |
Для уменьшения места для слайдера можно использовать классы типа col-lg-* или col-md-*, а также любые другие, основанные на сетке Bootstrap. Например, такая разметка выделит половину пространства контейнера для слайдера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <div class="row"> <div class="col-md-6"> <div id="sliderInner" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="nature/01.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/02.jpg" class="d-block w-100" alt="Природа"> </div> <div class="carousel-item"> <img src="nature/03.jpg" class="d-block w-100" alt="Природа"> </div> </div> <a class="carousel-control-prev" href="#sliderInner" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#sliderInner" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-md-6"> <h2 class="text-center my-4">Слайдер внутри <br><div class="col-md-6"></h2> </div> </div><!-- /.row --> </div><!-- /.container --> |
Несколько вариантов карусели с разной разметкой и размерами вы можете посмотреть по ссылке в новом окне/вкладке.
Затемнение изображений для слайдеров
Вы, должно быть уже заметили, что элементы управления слайдера и заголовок с текстом имеют по умолчанию белый цвет, поэтому должны хорошо читаться на темном фоне изображений слайдера. Далеко не все изображения имеют достаточный уровень контраста. Поэтому некоторые (а может, и все) картинки для слайдера придется затемнять. Для этой цели мы можем использовать Фотошоп.
В Adobe Photoshop вам нужно сделать такие действия после открытия в нем нужной картинки:
- Создать новый слой с помощью специальной иконки в палитре Слои (Layers, вызывается
клавишей F7, чаще всего находится справа внизу). - Залить его черным цветом (нажмите
клавишу Dна клавиатуре, чтобы сбросить цвета до значения по умолчанию - черного и белого). Для заливки нажмите клавишиALT + Backspace. - Для черного слоя уменьшить значение непрозрачности до 50-70% в зависимости от яркости картинки
- Объединить 2 слоя - черный и исходное изображение (Фон, или Background в Photoshop), нажав
CTRL + E. - Сохранить полученное изображение, нажав
CTRL + S.
Последовательность действий можно также посмотреть на скриншоте.
Использование карусели (слайдера) для раздела отзывов на странице
Довольно часто на посадочных страницах (Landing Page) используют раздел с отзывами клиентов в виде слайдера. Для него можно подключать какой-либо из сторонних плагинов, например, Flexslider, а можно использовать стандартный функционал бутстраповской карусели.
Как правило, в случае форматирования отзывов мы должны вывести фото автора отзыва, его имя и фамилию и текст самого отзыва. Для того чтобы сформировать разметку такого плана, нам не нужны большие изображения с подписями, которые мы рассматривали ранее. Нам нужны небольшие фото людей + текст, который довольно часто нужно разместить сбоку от фото. Поэтому в этом случае имеет смысл использовать классы сетки Bootstrap внутри классов карусели.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div id="carouselReviews" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselReviews" data-slide-to="0" class="active"></li> <li data-target="#carouselReviews" data-slide-to="1"></li> <li data-target="#carouselReviews" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="offset-sm-2 col-sm-3 col-md-2"> <img src="images/lara.jpg" class="img-fluid rounded-circle d-block m-auto pb-3" alt="Лариса Уварова"></div> <div class="offset-md-1 col-md-5 col-sm-5"> <div class="review"> Спасибо за быстрый заказ. Отличный сервис. С менеджером было легко и приятно общаться. <div class="review-author">Лариса Уварова</div> </div> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="offset-sm-2 col-sm-3 col-md-2"> <img src="images/igor.jpg" class="img-fluid rounded-circle d-block m-auto pb-3" alt="Игорь Минаев"></div> <div class="offset-md-1 col-md-5 col-sm-5"> <div class="review"> Отличный уровень сервиса. Доставили посылку за пару дней. А цены очень приемлемые за подобную доставку. <div class="review-author">Игорь Минаев</div> </div> </div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="offset-sm-2 col-sm-3 col-md-2"> <img src="images/mila.jpg" class="img-fluid rounded-circle d-block m-auto pb-3" alt="Мила Синицина"></div> <div class="offset-md-1 col-md-5 col-sm-5"> <div class="review"> Очень понравился товар. Посылка пришла быстро. Заказывыла подруге в подарок. Теперь хочу для себя. <div class="review-author"> Мила Синицина </div> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselReviews" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselReviews" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
На этапе добавления этого кода мы получим такой слайдер:
Можно заметить, что он автоматически пролистывает отзывы клиентов, как и другие карусели Bootstrap-4, но ни стрелок, ни индикаторов, управляющих этим процессом заметить не получится. Вспомним, что по умолчанию они в Bootstrap имеют белый цвет, и тогда становится понятно, что мы просто не видим их на белом фоне body, хотя они существуют на странице. Выход из этой ситуации прост - нужно отредактировать классы для стрелок и индикаторов, заменив белый цвет на черный (или темно-серый, если вам он больше нравится или используется в других местах на странице).
Для кастомизации элементов управления карусели для отзывов запишем такой css-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); } .carousel-indicators { bottom: -58px; } .carousel-indicators li { background-color: rgba(0, 0, 0, .5); } .carousel-indicators .active { background-color: #000; } |
После этого вы увидите и стрелки, и индикаторы. Обратите внимание на то, что стрелки сформированы с помощью svg-кода. Он был взят из свойств для соответствующих классов из Инспектора свойств (клавиша F12). Для изменения цвета svg-изображения, необходимо поменять параметр fill в свойстве background-image.
Именно это мы и сделали, заменив буквы 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 таков:
|
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.35 44"> <defs> <style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}</style> </defs><title>prev</title> <polyline class="cls-1" points="20.35 1 1.35 22 20.35 43"/> </svg> |
Используем ресурс URL ecoder for SVG для перевода кода SVG в подходящий для использования в свойстве background-image:
Аналогичным способом сделаем стрелку вправо, отразив по горизонтали первую стрелку в Adobe Illustrator. И тоже преобразуем код файла в URL ecoder for SVG.
Результирующий CSS-код такой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.35 44'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000; stroke-linecap:round;stroke-miterlimit:10; stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eprev%3C/title%3E%3Cpolyline class='cls-1' points='20.35 1 1.35 22 20.35 43'/%3E%3C/svg%3E"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.35 44'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23000;stroke-linecap:round; stroke-miterlimit:10;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='1 1 20 22 1 43'/%3E%3C/svg%3E"); } .carousel-control-next-icon, .carousel-control-prev-icon { width: 45px; height: 45px; } |
Итоговый слайдер с отзывами выглядим таким образом:
Ссылки на документацию Bootstrap:
Спасибо. Пример с кастомными стрелками для бутстраповского слайдера - это то, что я искал
Здравствуйте. А как сделать слайдер только на маленьких экранах? У меня есть div container, в нем блоки col-lg-3 col-md-4 col-ms-6 col-xs-12 , нужно чтобы на мобильных эти блоки отображались слайдером, а на больших оставались как есть друг за другом. Можно такое реализовать?
Добрый день.
Вы могли бы выложить свой код со слайдером на какой-нибудь внешний ресурс с возможностью редактирования, например, на https://codepen.io или https://jsfiddle.net/, чтобы можно было точно понять, что вам нужно?
Ссылку можно добавить сюда, в комментарии или прислать через форму на странице Контакты.