Bootstrap 4 Динамическая карусель WordPress не будет скользить
Я пытаюсь создать динамическую карусель, используя Bootstrap 4 и WordPress. У меня правильно отображается заголовок и первое изображение на передней панели, но я не могу заставить карусель перейти к следующему изображению и заголовку.
Я проверил DOM и the data-slide-to обновляет $number на связанный <a> теги правильно на каждом слайде. Поэтому я не уверен, почему, когда я нажимаю <a> теги не будут скользить к следующему изображению в карусели.
Я проверил HTML с помощью жесткого кодирования HTML в качестве теста, и он работает нормально, я загружаюсь в jQuery и Bootstrap4 JS правильно. Кроме того, так как data-slide-to имеет правильные числа в DOM. Я не уверен, какая часть кода вызывает перемещение ползунка вперед.
HTML / PHP — Bootstrap 4
<div id="my-carousel" class="carousel slide" data-ride="carousel">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Featured',
'posts_per_page' => 1,
'offset' => 0
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background: url('<?php echo $backgroundImg[0]; ?>');">
<div class="carousel-caption d-none d-md-block">
<h2 class="slider-sub"><?php the_title(); ?></h2>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- END CAROUSEL INNER -->
<div class="container-fluid">
<div class="row slider-row">
<?php
$number = 0;
query_posts('category_name=featured');
if(have_posts()):
?>
<?php while(have_posts()): the_post(); ?>
<div class="col-sm-4 feature-box highlight carousel1">
<a data-target="#my-carousel" data-slide-to="<?php echo $number++; ?>" class="active carousel-link"><?php the_title(); ?></a>
</div><!-- END COL -->
<?php endwhile; ?>
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
<?php endif; wp_reset_query(); ?>
Решение
Я получил это работает. Я переписал, как назывались посты, и узнал, что, хотя я скрываю индикаторы карусели, слайдер не будет менять слайды, если они не будут частью HTML. Не уверен, что это только для меня или правила Bootstrap, но это был мой опыт. Вы можете видеть в моем коде, что я пытаюсь заменить изменяющиеся слайды ссылками, которые работают, но индикаторы все еще должны существовать в HTML. Если они будут удалены, это не будет работать.
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'category_name' => 'Featured'
);
$the_query = new WP_Query ( $args );
?>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="7000">
<ol class="carousel-indicators">
<!-- Start Carousel Indicator Loop -->
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li data-target="#my-carousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="<?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"></li>
<?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>
<div class="carousel-inner">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div style="background: url('<?php echo $backgroundImg[0]; ?>');" class="carousel-item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> </a>
<div class="container">
<div class="carousel-caption text-left">
<h1><?php the_title(); ?></h1>
<p class="d-none d-sm-block"><?php the_excerpt(); ?></p>
</div>
</div>
</div><!-- /.carousel-item -->
<!-- end second loop -->
<?php endwhile; endif; ?>
</div><!-- /.carousel-inner -->
<div class="container-fluid">
<div class="row slider-row carousel slide" data-ride="carousel" data-interval="7000">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-sm-4 feature-box highlight carousel1">
<a data-target="#my-carousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="carousel-link <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"><?php the_title(); ?></a>
</div><!-- END COL -->
<?php endwhile; endif; ?>
<?php rewind_posts(); ?>
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
Другие решения
Других решений пока нет …
detector