What is Carousel?
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Read more document about carousel here: https://getbootstrap.com/docs/5.2/components/carousel/
Note: Bootstrap Carousel will start its work from two contents so you need to create at least two WordPress post to testing your work. If you want your slideshow to slide only your specific post or Featured Post, please see here how to create Feature Post or Sticky Post, please see here how to get your WordPress sticky post.
Here! we have already implemented Bootstrap Carousel and WordPress as below:
<?php
$last_posts = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 4,
'post_status' => 'publish',
'post__not_in' => get_option('sticky_posts'),
'tax_query' => array(
array(
'taxonomy' => 'post_tag',
'field' => 'name',
'terms' => 'Featured',
),
),
'orderby' => 'rand',
'order' => 'desc'
) );
?>
<section class="py-5 bg-light border-bottom border-top">
<div class="container-fluid px-3">
<div class="row row-cols-2">
<?php
if ( is_active_sidebar( 'suostei_featured_ad' ) ) :
$cols_first = "col-lg-8";
$cols_second = "col-lg-4";
else:
$cols_first = "col-lg-12";
$cols_second = "col-lg-12";
endif;
?>
<div class="<?php echo $cols_first;?> col-md-12 col-sm-12 col-12">
<div id="quickButton" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#quickButton" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#quickButton" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#quickButton" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#quickButton" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner h-100">
<?php
if ($last_posts->have_posts()):
$last_posts->the_post();
if (has_post_thumbnail()):
$post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $last_posts->ID ),'full');
else:
$post_thumbnail = array(suostei_theme_uri.'/assets/noimage.jpg','');
endif;
?>
<div class="carousel-item active">
<div class="row g-0 overflow-hidden flex-md-row mb-1 h-100 w-100 position-relative">
<div class="card card-cover h-100 overflow-hidden text-bg-dark" style="background-image: url('<?php echo $post_thumbnail[0];?>');">
<div class="col p-4 d-flex flex-column position-static text-shadow-1 bg-dark bg-opacity-50">
<h4 class="mb-0 lh-base card-text text-center p-3 display-6"><a class="link-info" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<hr/>
<p class="card-text text-center mb-auto overflow-hidden p-5 pb-lg-5 pt-lg-4 px-lg-5 h-100 carousel-caption-size"><?php echo suostei_excerpt();?></p>
<hr/>
<div class="d-flex justify-content-between d-block">
<p class="p-0">
<?php
$categories = get_the_category($last_posts->ID);
if ( ! empty( $categories ) ) {
echo '<a class="link-info" href="'.esc_attr(esc_url(get_category_link($categories[0]->term_id))).'">'.esc_html( $categories[0]->name ).'</a>';
}
?>
</p>
<div class="mb-1 text-info text-end p-0">
<time datetime="<?php echo get_the_date('c'); ?>" itemprop="datePublished">
<?php
echo get_the_date($last_posts->ID);
?>
</time>
</div>
<p class="p-0">
<a class="float-end link-info" onClick="window.location.href='<?php the_permalink();?>'" type="button" class="btn btn-primary btn-lg px-4 me-md-2"><i class="fas fa-book-open-reader"></i> <?php echo readmore;?></a>
</p>
</div>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php while ($last_posts->have_posts()):
$last_posts->the_post();
if (has_post_thumbnail()):
$post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $last_posts->ID ),'full');
else:
$post_thumbnail = array(suostei_theme_uri.'/assets/noimage.jpg','');
endif;
?>
<div class="carousel-item">
<div class="row g-0 overflow-hidden flex-md-row mb-1 h-100 w-100 position-relative">
<div class="card card-cover h-100 overflow-hidden text-bg-dark" style="background-image: url('<?php echo $post_thumbnail[0];?>');">
<div class="col p-4 d-flex flex-column position-static text-shadow-1 bg-dark bg-opacity-50">
<h4 class="mb-0 lh-base card-text text-center p-3 display-6"><a class="link-info" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<hr/>
<p class="card-text text-center mb-auto overflow-hidden p-5 pb-lg-5 pt-lg-4 px-lg-5 h-100 carousel-caption-size"><?php echo suostei_excerpt();?></p>
<hr/>
<div class="d-flex justify-content-between d-block">
<p class="p-0">
<?php
$categories = get_the_category($last_posts->ID);
if ( ! empty( $categories ) ) {
echo '<a class="link-info" href="'.esc_attr(esc_url(get_category_link($categories[0]->term_id))).'">'.esc_html( $categories[0]->name ).'</a>';
}
?>
</p>
<div class="mb-1 text-info text-end p-0">
<time datetime="<?php echo get_the_date('c'); ?>" itemprop="datePublished">
<?php
echo get_the_date($last_posts->ID);
?>
</time>
</div>
<p class="p-0">
<a class="float-end link-info" onClick="window.location.href='<?php the_permalink();?>'" type="button" class="btn btn-primary btn-lg px-4 me-md-2"><i class="fas fa-book-open-reader"></i> <?php echo readmore;?></a>
</p>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#quickButton" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#quickButton" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="<?php echo $cols_second;?> col-md-12 col-sm-12 col-12">
<div class="d-flex justify-content-center">
<?php do_action('_featured_ads');?>
</div>
</div>
</div>
</div>
</section>
Please remember that the example code above is working fine with Bootstrap 5.2.2 and WordPress 6.2. Enjoy!
