Last active
September 18, 2020 20:30
-
-
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/
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
$(document).ready(function() { | |
$('.carousel').carousel(); | |
$(".carousel-indicators li:first").addClass("active"); | |
$(".carousel-inner .item:first").addClass("active"); | |
}); |
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
<?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 | |
} | |
?> |
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
<?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
This should be using WPquery instead.