Как сделать карусель в bootstrap?
Как сделать карусель в bootstrap?
2 ответа
от
ally ,
2 года назад
@roxanne.hauck
Для создания карусели в Bootstrap необходимо:
- Подключить CSS и JavaScript файлы Bootstrap.
- В HTML коде создать контейнер с классом "carousel" и идентификатором, который будет использоваться в JavaScript.
- Внутри контейнера создать слайды с классом "carousel-item".
- Добавить навигационные элементы (стрелки) и индикаторы (точки) для перелистывания слайдов.
- Вызвать карусель с помощью JavaScript: $('#идентификатор').carousel();
Пример кода:
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 |
<!-- HTML -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img1.jpg" alt="Image 1">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 description</p>
</div>
</div>
<div class="carousel-item">
<img src="img2.jpg" alt="Image 2">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 description</p>
</div>
</div>
<div class="carousel-item">
<img src="img3.jpg" alt="Image 3">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 description</p>
</div>
</div>
</div>
<!-- Navigation -->
<
|
от
stanford_mosciski ,
год назад
@roxanne.hauck
a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> Previous Next
Замените "img1.jpg", "img2.jpg" и "img3.jpg" на пути к вашим изображениям. Код создаст карусель с тремя слайдами, отображающими изображения с подписями.
15