Ashley Cameron Design

Ashley Cameron Design

Shop the Creative Design Market

Goodnight

Bootstrap Carousel with WordPress & Featured Image Background

This post was last updated: Sep 3, 2020
SnippetsWordPress

About a 1 minute read

"The art of living… is neither careless drifting on the one hand nor fearful clinging to the past on the other. It consists in being sensitive to each moment, in regarding it as utterly new and unique, in having the mind open and wholly receptive."

Alan Watts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- Set a min-height on slider in css -->
<section id="slider" class="row">
    <h2 style="display: none;">Carousel</h2>
    <div id="carousel" class="carousel slide">
        <?php $slider = new WP_Query(array(
        'post_type' => 'post',
        'cat'       => 4,
        'posts_per_page' => 7,
        'orderby' => 'menu_order',
        'order' => 'ASC',
        ));
        $count = 0;
    ?>
        <ol class="carousel-indicators">
          <?php while($slider->have_posts()): $slider->the_post(); ?>
            <li <?php if ( $count == 0){ echo 'class="active"';} ?> data-target="#carousel" data-slide-to="<?php echo $count++; ?>"></li>
          <?php endwhile;  wp_reset_postdata(); ?>
        </ol>

        <div class="carousel-inner">
          <?php
         $count = 0;
             while ($slider->have_posts()) : $slider->the_post();
             $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
             ?>
       <div class="item <?php if ( $count == 0){ echo 'active';};?>" data-slide-number="<?php echo $count++;?>" style="background:url(<?php echo $image[0];?>) no-repeat center; background-size:cover;">
        <h3><?php the_title();?></h3>
       </div><!-- item active -->
       <?php endwhile; wp_reset_postdata(); ?>
        </div>
        <a class="carousel-control prev" href="#carousel" data-slide="prev"></a>
        <a class="carousel-control next" href="#carousel" data-slide="next"></a>
    </div><!-- end #carousel -->
</section>

<script>
    jQuery(function($){
        jQuery('#carousel').carousel({
            interval: false
        });
    });
</script>