Skip to content

Instantly share code, notes, and snippets.

@barbwiredmedia
Last active September 18, 2020 20:30
Show Gist options
  • Save barbwiredmedia/7797382 to your computer and use it in GitHub Desktop.
Save barbwiredmedia/7797382 to your computer and use it in GitHub Desktop.
bootstrap slider WordPress Dynamic Content ACF Custom Post Type loop Query Posts or gallery. Credit to Doug for this fantastic solution http://www.lanexa.net/2013/03/update-bootstrap-carousel-wordpress-dynamic-content/
<?php
$count = count(get_field('slider_background'));
// begin $count conditions
if ($count >= 2) {
?>
<!-- Controls -->
<a class="left carousel-control" href="homeSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homeSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php
} elseif ($count == 1) {
//No more then one slide = no navigation
}
?>
<?php //Wordpress Loop Example
$number = 0;
query_posts('post_type=slider_panels&posts_per_page=20&order=ASC');
if (have_posts()):
?>
<div id="homeSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php while (have_posts()): the_post(); ?>
<li data-target="#homeSlider" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<?php while (have_posts()): the_post(); ?>
<div class="item">
<!-- your slider content -->
</div>
<?php endwhile; ?>
<?php endif;
wp_reset_query(); ?>
</div>
</div>
<!--ACF Repeater Example (no indicators)-->
<div id="homeSlider" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<?php while (the_repeater_field('slider_background')): ?>
<div class="item" style="background-image:url('<?php the_sub_field('slider_background_image') ?>');">
</div>
<?php endwhile; ?>
</div>
</div>
<!--Get_posts-->
<?php
$number = 0;
$args = array('post_type' => 'specials', 'posts_per_page' => -1,);
$myposts = get_posts($args);
?>
<div id="car-slider" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<?php foreach ($myposts as $post) : setup_postdata($post); ?>
<div class="item">
//your stuff
</div><!--close item-->
<?php endforeach; ?>
</div><!--Close inner-->
<!-- Indicators -->
<div class="indicators">
<ol class="carousel-indicators clearfix">
<?php foreach ($myposts as $post) : setup_postdata($post); ?>
<li data-target="#car-slider" data-slide-to="<?php echo $number++; ?>"></li>
<?php endforeach; ?>
</ol>
</div>
<?php wp_reset_postdata(); ?>
@barbwiredmedia
Copy link
Author

This should be using WPquery instead.

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