Ashley Cameron Design

Ashley Cameron Design

Shop the Creative Design Market

Good morning

Bootstrap Carousel with WordPress & Featured Image Background

This post was last updated: Sep 3, 2020
SnippetsWordPress

About a 1 minute read

"Design is a formal response to a strategic question."

Mariona Lopez, business owner


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>