Для создания индикаторов для слайда, как на приведенном примере, можно использовать Bootstrap Carousel.
Bootstrap Carousel - это компонент Bootstrap, который позволяет создать съезжающие слайды на веб-странице. Индикаторы слайдов в Bootstrap Carousel представляют собой набор маленьких точек или значков под слайдами, которые отображают текущий активный слайд и позволяют пользователям переключаться между слайдами.
Для создания индикаторов для слайда сначала необходимо подключить Bootstrap к вашему проекту. Вы можете использовать локальную копию Bootstrap, загрузить его с официального сайта или использовать Content Delivery Network (CDN), чтобы вставить ссылку на Bootstrap в ваш HTML-документ.
После подключения Bootstrap можно создать разметку для слайдов и индикаторов. Вот основной код разметки, который позволит вам создать индикаторы для слайда как на приведенном примере:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы слайдов -->
<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>
<!-- Слайды -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" alt="Slide 3">
</div>
</div>
<!-- Стрелки для переключения слайдов -->
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
В коде выше определены индикаторы слайдов в виде элемента ol с классом carousel-indicators. Каждый индикатор - это элемент li, который имеет атрибуты data-target, указывающий на идентификатор слайдера, и data-slide-to, указывающий на индекс слайда. Обратите внимание, что первый индикатор имеет класс active, чтобы выделить первый слайд.
Для того чтобы индикаторы и слайдер работали, необходимо добавить JavaScript-код, который инициализирует Bootstrap Carousel:
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
В этом коде мы используем document.ready для того, чтобы убедиться, что код выполняется после загрузки страницы. Затем мы вызываем функцию carousel(), которая инициализирует слайдер.
Теперь, после добавления данного кода и загрузки всех необходимых изображений, вы можете увидеть созданные индикаторы и работу слайдера на вашей веб-странице.
Надеюсь, что данное объяснение поможет вам создать индикаторы для своего слайдера в стиле Bootstrap Carousel. Если у вас возникнут какие-либо вопросы, не стесняйтесь задавать их!