Skip to content

Instantly share code, notes, and snippets.

@codigoconjuan
Created July 4, 2017 03:56
Show Gist options
  • Save codigoconjuan/298a19b24c7e481aa1bda626e9a2b0a6 to your computer and use it in GitHub Desktop.
Save codigoconjuan/298a19b24c7e481aa1bda626e9a2b0a6 to your computer and use it in GitHub Desktop.
Bootstrap 4 Slider with WordPress
<div id="main-slider" class="carousel slide mt-4" data-ride="carousel">
<?php $args = array(
'posts_per_page' => 5,
'tag' => 'slider'
);
$slider = new WP_Query($args);
if($slider->have_posts()):
$count = $slider->found_posts;
?>
<ol class="carousel-indicators">
<?php for($i = 0; $i < $count ; $i++) { ?>
<li data-target="#main-slider" data-slide-to="<?php echo $i; ?>" class="<?php echo ($i == 0) ? 'active' : ''?>"></li>
<?php } ?>
</ol> <!--.carousel-indicators-->
<div class="carousel-inner" role="listbox">
<?php $i = 0; while($slider->have_posts()): $slider->the_post(); ?>
<div class="carousel-item <?php echo ($i == 0) ? 'active' : ''?>">
<?php the_post_thumbnail( 'slider', array(
'class' => 'd-block img-fluid',
'alt' => get_the_title() ) ) ; ?>
<div class="carousel-caption d-none d-md-block">
<h3 class="text-uppercase"><?php echo get_the_content(); ?></h3>
</div>
</div><!--.carousel-item-->
<?php $i++; endwhile; ?>
</div> <!--.carouse-inner-->
<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#main-slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php endif; wp_reset_postdata(); ?>
</div>
@andrefigueira
Copy link

doesn't seem to work

@denisbosire
Copy link

denisbosire commented Nov 4, 2019

The code works fine, just remove line 5 or add posts with the tag "slider".

@emwebber
Copy link

emwebber commented Apr 8, 2021

This is awesome! I've been looking for a quick solution to something and this is the perfect fit. Thanks for putting it together and sharing :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment