Как добавить слайдер Bootstrap 4 на вордпресс?

Question

[Xva1er]

как добавить слайдер карусели бутстрап 4 на вордпресс у меня что-то не получается сделать это помогите пожалуйста
шаблон карусели

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="Первый слайд">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Второй слайд">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Третий слайд">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

изменил так
index.php

<div class="row p-0 m-0">
				<div class="col-md p-0 m-0">
					<div class="direction-carousel">
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
						    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
						    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
						  </ol>
						  <div class="carousel-inner">
						    <div class="carousel-item active">
						      <?php 
						      $pages = get_pages( [
								'hierarchical' => 1,
								'child_of'     => 5,
								'parent'       => -1,
								'post_type'    => 'page',
								'post_status'  => 'publish',
							] );
							foreach( $pages as $post ){
								setup_postdata( $post );
								?>

							<div class="carousel-item">
								<?php the_post_thumbnail('direction-carousel', '') ?>
						      <img class="d-block w-100" alt="">
						    </div>



							<?php	// формат вывода
							}
							wp_reset_postdata();
						      ?>
						    </div>
						  </div>
						  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
					</div>
				</div>
			</div>

functions.php

<?php


// правильный способ подключить стили и скрипты
add_action( 'wp_enqueue_scripts', 'copp10_styles' );
add_action( 'wp_footer', 'copp10_styles_footer' );
add_action( 'wp_enqueue_scripts', 'jquery_lib' );

function jquery_lib(){
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//code.jquery.com/jquery-3.5.1.min.js');
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . 
               '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), ' ' );

}
// add_action('wp_print_styles', 'theme_name_scripts'); // можно использовать этот хук он более поздний
function copp10_styles() {
	wp_enqueue_style( 'main', get_stylesheet_uri() );
	wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap-grid.min.css');
}
function copp10_styles_footer() {
	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/assets/slick/slick-theme.css');
	wp_enqueue_style( 'slick', get_template_directory_uri() . '/assets/slick/slick.css');
}
add_theme_support('post-thumbnails');
add_image_size('direction-carousel', 371, 141, true);


 ?>

Comments

[Кирилл Никитин]

Ну как минимум carousel-item засунут в carousel-item.active. А как в девтулс и DOM это всё выглядит?

[ProjectSoft]

Так же надо через foreach прогнать вывод .carousel-indicators
Имхо. Карусель от Bootstrap не очень хорошее решение.

[Xva1er]

ProjectSoft, а можешь пожалуйста, наглядно показать как это будет выглядеть? а то у меня не получается что-то, выглядет как то так

[Антон Литвиненко]

нынче отключать джейквери чтобы подключить свое уже не нужно.

[Модератор]

Длинные портянки кода следует прятать под спойлеры.

[ProjectSoft]

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

PHP

<?php
$i = 0;
$pages = get_pages([
	'hierarchical' => 1,
	'child_of'     => 5,
	'parent'       => -1,
	'post_type'    => 'page',
	'post_status'  => 'publish',
]);?>
<div class="row p-0 m-0">
	<div class="col-md p-0 m-0">
		<div class="direction-carousel">
			<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<!-- Выводим индикаторы -->
					<?php for($i = 0; $i < count($pages); ++$i):
					//Первому элементу добавим класс active
					?>
					<li data-target="#carouselExampleIndicators" data-slide-to="<?= $i;?>"<?=($i==0 ? ' class="active"' : '');?>></li>
					<?php endfor; 
					// Сбросим переменную $i
					$i = 0;
					?>
				</ol>
				<div class="carousel-inner">
					<?php
					foreach( $pages as $post ):
						setup_postdata( $post ); ?>
					<div class="carousel-item<?=($i == 0 : ' active' : '');?>">
						<!-- Выводим HTML код изображения -->
						<?php the_post_thumbnail('direction-carousel', '') ?>
					</div>
					<?php
						++$i;
					endforeach;
					wp_reset_postdata();
					?>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
</div>