Слайдер с управлением из под админки

Создаем группу полей для слайда. Ставим ему условие отображения в редакторе главной страницы.

Создаем повторитель, и в нем поля для каждого слайда.

В шаблоне главной странице в разделе для 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>

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены