Created
July 4, 2017 03:56
-
-
Save codigoconjuan/298a19b24c7e481aa1bda626e9a2b0a6 to your computer and use it in GitHub Desktop.
Bootstrap 4 Slider with WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
The code works fine, just remove line 5 or add posts with the tag "slider".
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
doesn't seem to work