-
-
Save slavapas/ceecb3e67dd12239fba3c4873f262d11 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment