Integrating Bootstrap carousel in WordPress without plugin

Question

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\" po

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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