Skip to content

Instantly share code, notes, and snippets.

@elpuas
Forked from barbwiredmedia/carousel-start.js
Created August 26, 2017 20:16
Show Gist options
  • Save elpuas/35438af81b55e1d8d1c41d5750bb83dc to your computer and use it in GitHub Desktop.
Save elpuas/35438af81b55e1d8d1c41d5750bb83dc 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(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment