Как создать слайдер карусели для вашего сайта в Bootstrap CSS

 
   <div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>

Теперь, когда я успешно создал карусель только со слайдами, пришло время добавить предыдущий и следующий элементы управления. Чтобы создать их, добавьте два элемента и определите их с помощью класса .carousel-control-prev-icon и класса .carousel-control-next-icon соответственно.

 
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
<span class="carousel-control-next-icon" aria-hidden="true"></span>

Обратите внимание на атрибуты ARIA. Мы объясним их через минуту, но сначала мы должны рассмотреть, что добавить, чтобы сделать дизайн доступным.

Некоторые пользователи, особенно те, которые используют программы чтения с экрана, не видят или не могут щелкать предыдущие и следующие значки. Вот почему вам нужно добавить еще два элемента диапазона, которые обозначают каждый значок как «Предыдущий» и «Следующий». Определите их с помощью класса .sr-only, чтобы текст был скрыт на всех устройствах, кроме программ чтения с экрана. У вас должно получиться две пары пролетов, которые выглядят следующим образом:

 
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
 
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>

Атрибут aria-hidden указывает вспомогательным технологиям пропускать DOM карусели, чтобы при просмотре этого кода они читали просто «Предыдущий» или «Следующий».

Теперь, когда мы создали значки (и альтернативный текст), нам нужно обернуть пары в элементы . Определите каждый элемент с помощью класса .carousel-control prev и .carousel-control-next соответственно.

Вам также понадобятся [href] s с тем же именем ID, что и у элемента карусели. В Bootstrap элементы управления и индикаторы должны иметь атрибут data-target (или href для ссылок), который соответствует идентификатору элемента .carousel. Вы назначите каждой из них роль кнопки и атрибут слайда данных, установленный на «предыдущий» и «следующий» соответственно. Вот как будет выглядеть HTML:

 
   <a class="carousel-control-prev" href="#SimpleCarouselExample" 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="#SimpleCarouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Собрав все вместе, вот HTML-код, который вам понадобится для создания простой карусели со слайдами и элементами управления:

 
   <div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

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

Вы можете найти другие примеры каруселей в официальной документации Bootstrap.

Карусельный слайдер на чистом CSS

Прежде чем мы погрузимся в пример сборки, важно понять, что для создания слайдера карусели на чистом CSS также требуется HTML. В конце концов, CSS – это язык стилей, поэтому вам понадобится HTML, чтобы было что стилизовать.

Карусель «чистый CSS» или «только CSS» означает, что вам не понадобится JavaScript. Это хорошая новость для большинства владельцев сайтов, поскольку JavaScript – сложный язык программирования, который может быть трудно выучить и правильно использовать.

Теперь, когда у нас есть лучшее представление о терминологии и ценности мышления, ориентированного на CSS, давайте рассмотрим пример построения карусели только для CSS.

Допустим, вы хотите создать карусель с тремя слайдами. Затем вы должны создать три элемента

 
   <div class="slides">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

 
   .slides {
display: flex;
}
.slides > div {
display: flex;
}

 
   .slides {
overflow-x: auto;
}
 

 
   .slides > div {
flex-shrink: 0;
width: 100%;
height: 300px;
}
 

 
   .slides {
scroll-snap-type: x mandatory;
}
.slides > div {
scroll-snap-align: start;
scroll-behavior: smooth;
}

 
   .slides > div {
background: #74ABE2;
justify-content: center;
align-items: center;
font-size: 100px;
}

 
   .slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slides > div {
display: flex;
flex-shrink: 0;
width: 100%;
height: 300px;
scroll-snap-align: start;
scroll-behavior: smooth;
background: #74ABE2;
justify-content: center;
align-items: center;
font-size: 100px;
}