Создаем группу полей для слайда. Ставим ему условие отображения в редакторе главной страницы.
Создаем повторитель, и в нем поля для каждого слайда.
В шаблоне главной странице в разделе для PHP кода размещаем код формирования элементов.
PHP
$sliders = get_field('sliders', 7);
// echo '<pre>';
// print_r($sliders);
// echo '</pre>';
$btn_slider = '';
$itm_slider = '';
$i = 0;
foreach($sliders as $slider) {
if ($i == 0) {
$btn_slider .= '<button type="button" data-bs-target="#carouselMain-v3" data-bs-slide-to="' . $i . '" class="active" aria-current="true" aria-label="Slide ' . $i . '"></button>';
$itm_slider .= '
<div class="carousel-item active">
<div class="carousel-item-itm">
<div class="container-001v3__cartextblock">
<div class="container-001v3__carousel">
<div class="container-001v3__carousel-text">
<p class="container-001v3__carousel-maintext">' . $slider['main_text'] . '</p>
<p class="container-001v3__carousel-text">
' . $slider['text'] . '
</p>
<p class="container-001v3__carousel-maintext">
' . $slider['sub_main_text'] . '
</p>
</div>
<div class="container-001v3__carousel-ps">
<p class="container-001v3__carousel-ps-text">
' . $slider['ps_text'] . '
</p>
</div>
</div>
</div>
<div class="container-001v3__image overlay-black-v3" style="background-image: url(' . $slider['back_image'] . ');"></div>
</div>
</div>
';
} else {
$btn_slider .= '<button type="button" data-bs-target="#carouselMain-v3" data-bs-slide-to="' . $i . '" aria-label="Slide ' . $i . '"></button>';
$itm_slider .= '
<div class="carousel-item">
<div class="carousel-item-itm">
<div class="container-001v3__cartextblock">
<div class="container-001v3__carousel">
<div class="container-001v3__carousel-text">
<p class="container-001v3__carousel-maintext">' . $slider['main_text'] . '</p>
<p class="container-001v3__carousel-text">
' . $slider['text'] . '
</p>
<p class="container-001v3__carousel-maintext">
' . $slider['sub_main_text'] . '
</p>
</div>
<div class="container-001v3__carousel-ps">
<p class="container-001v3__carousel-ps-text">
' . $slider['ps_text'] . '
</p>
</div>
</div>
</div>
<div class="container-001v3__image overlay-black-v3" style="background-image: url(' . $slider['back_image'] . ');"></div>
</div>
</div>
';
}
$i++;
}
А в HTML разметке, где у нас будет слайдер размещаем код.
HTML
<div class="container-001v3">
<div class="container-001v3-content">
<div id="carouselMain-v3" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<?php echo $btn_slider; ?>
</div>
<div class="carousel-inner">
<?php echo $itm_slider; ?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMain-v3" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselMain-v3" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>