Integrating Bootstrap carousel in WordPress without plugin

March 16, 20231 Views

I have integarted bootstrap carousel into my wordpress. The slides will be taken from the posts which will be tagged as “featured” so only 5 recently enter “featured” posts will be shown.

Below is my code:

<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
        <ol class="carousel-indicators">
          <li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-captions" data-slide-to="1" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="2" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="3" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="4" class=""></li>
        </ol>
        <div class="carousel-inner">

<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>

<?php if ( $the_query->have_posts() ) : ?>

  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="item">
          <a href="<?php the_permalink() ?>">
            <img src="<?php the_field('header_banner', $post_id); ?>" alt="">
            <div class="carousel-caption">
              <h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
              <p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details&nbsp;&nbsp;&nbsp;&rarr;</span>
            </div></a>
          </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php else:  ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


        </div>
        <a class="left carousel-control" href="#carousel-captions" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-captions" data-slide="next">
          <span class="icon-next"></span>
        </a>
</div>

The problem is It doesn’t slide because the “active” class is not working statically.

HOw do I fix this?

Thanks

Post Views: 1

6 comments

To avoid having to query twice, you can set a variable set to 1 outside your loop. In the loop, you add the “active” class when it’s equal to 1, then you increment it.

<?php
// Previous code here...
$i = 1;
while ( $the_query->have_posts() ) :
    $the_query->the_post();
         ?>
        <div class="item<?php if ($i == 1) echo 'active'; ?>">

        </div>
<?php
    $i++;
endwhile;
wp_reset_postdata();
?>

This is the solution I came up with:

<?php
 $args = array(
 'post_type'      => 'slides',
 'oderby'         => 'menu_order',
 'posts_per_page' => -1
 );

$slides = new WP_Query( $args );

if( $slides->have_posts() ): ?>
<div class="row">
  <div class="col-xs-12">
      <!--Twitter bootstrap Photo carrousel-->
  <div id="myCarousel" class="carousel slide center-block"     data-ride="carousel" >
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <?php while( $slides->have_posts() ) : $slides->the_post(); $index++ ?>

      <?php if ( $index == 1 ): ?>
        <div class="item active">
      <?php else: ?>
        <div class="item">
      <?php endif; ?>
      <?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
            <img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
        </div>
  <?php endwhile; ?>
<?php endif; ?>
      <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
  </div>
</div><!-- carrousel ends here -->

I learnt this by watching the following video: Integrating the Bootstrap Carousel into the WordPress theme by user Ezer Sanbe. All credits to him.

The youtube video or the channel for this user are no longer available, sorry

Hope this helps

Limit the first query to 1 post. In that first loop, set the carousel item class to active. Reset the query and run a second loop, offset by one, and negate the active class, like so:

    <div class="carousel-inner">
        <?php
          $the_query = new WP_Query(array(
           'post_type' =>'post',
           'posts_per_page' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
        <div class="item active">
            First Slide
        </div>
        <?php endwhile; wp_reset_postdata(); ?>
        <?php
         $the_query = new WP_Query(array(
          'post_type' =>'post',
          'offset' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
         <div class="item">
            Remaining Slides
         </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>

Bootstrap 3 with custom post type (here named “diapositives”):

<!-- Define the loop -->
        <?php $diapositivesloop = new WP_Query( array( 'post_type' => 'diapositives', 'posts_per_page' => -1 ) ); ?>
        <?php $i=1; ?>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">

        <?php while ( $diapositivesloop->have_posts() ) : $diapositivesloop->the_post(); ?>
                <?php the_content(); ?>


                <div class="item <?php if ($i == 1) echo 'active'; ?>">
                    <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="...">
                    <div class="carousel-caption">
                        <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
                    </div>
                </div>



        <!-- End of the loop -->
        <?php $i++; ?>
        <?php endwhile; wp_reset_query(); ?>

        <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

Integrating Bootstrap carousel in WordPress without plugin

    <!-- Carousel items -->
    <div class="carousel-inner">
    <?php $slider = new WP_Query(array(
        'post_type' => 'slider',
        'posts_per_page'    => 1,
    )); ?>
    <?php 
    if ( have_posts() ) {
        $x=0;
        while ( $slider->have_posts() ) {
            $x++;
            $slider->the_post(); ?>
                <div class="<?php if($x==1){echo 'active'} ?> item">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php the_post_thumbnail(); ?>
                        </a>
                    <?php endif; ?>
                </div>
        <?php } // end while
    } // end if
    ?>


    </div>
    <!-- Carousel nav -->

     <ol class="carousel-indicators">
        <?php for($i=0; $i<$x; $i++; ) { ?>
            <li data-target="#carousel" data-slide-to="<?php echo $i;  ?>" class="<?php if($i==0){ echo 'active' }?>"></li>
        <?php } ?>
    </ol>

    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

<div id="carousel-1" class="carousel slide">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php 
            $slider = new WP_Query(array(
                'post_type' => 'slider',
                'posts_per_page'    => 7,
            ));
        ?>

        <?php 
        if ( have_posts() ) {
            $x=0;
            while ( $slider->have_posts() ) {
                $x++;
                $slider->the_post(); ?>

                <!-- Begin Slide 1 -->

                <div class="item <?php if($x==1){ echo 'active'; }?>">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <?php the_post_thumbnail('slider-img'); ?>
                    <?php endif; ?>
                    <div class="carousel-caption">
                        <h3 class="carousel-title hidden-xs"><?php the_title(); ?></h3>
                        <p class="carousel-body"><?php the_content(); ?></p>
                    </div>
                </div>

                <!-- End Slide 1 -->

            <?php } // end while
            wp_reset_postdata();
        } // end if
        ?>


    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators visible-lg">
        <?php 
            for($i=0; $i<$x; $i++){ ?>
                <li data-target="#carousel-1" data-slide-to="<?php echo $i; ?>" class="<?php if( $i==0 ){echo 'active'; }?>"></li>
            <?php }
        ?>
    </ol>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-1" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-1" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Integrating Bootstrap carousel in WordPress without plugin

Leave a Reply Cancel reply

6 comments

Social Network

Related posts

Leave a Reply Cancel reply

6 comments

Social Network