CODEWITHSUNDEEP
javascriptphpjquerywordpresstwitter-bootstrap
user5854648
user5854648

Reputation: 1121

Bootstrap 4 Dynamic WordPress Carousel Won't Slide

I am trying to create a dynamic carousel using Bootstrap 4 and WordPress. I have the title and first image appearing on the front-end correctly but I can't get the carousel to slide to the next image and title.

I checked the DOM and the data-slide-to is updating the $number on the associated <a> tags correctly on each slide. So I'm not sure why when I click the <a> tags it won't slide to the next image in the carousel.

I have tested the HTML by hard-coding HTML as a test and it works fine, I am loading in jQuery and the Bootstrap4 JS correctly. Additionally, since the data-slide-to has the correct numbers in the DOM I'm not sure what part of the code is causing the slider to not move forward.

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(); ?>

Upvotes: 0

Views: 882

Answers (1)

user5854648
user5854648

Reputation: 1121

I got this working. I rewrote how the posts were being called and I learned that even though I'm hiding carousel indicators, the slider wouldn't change slides without them being part of the HTML. Not sure if that's just on my end or a rule with Bootstrap but that was my experience. You can see in my code I try to replace changing slides with links, which do work but the indicators must still exist in the HTML. If they are removed, it will not work.

<?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 -->

Upvotes: 1

Related Questions