Skip to content

Instantly share code, notes, and snippets.

@jdcauley
Last active October 25, 2017 08:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jdcauley/5673535 to your computer and use it in GitHub Desktop.
Save jdcauley/5673535 to your computer and use it in GitHub Desktop.
Wordpress Bootstrap Carousel using a custom Post
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<?php query_posts('post_type=features&showposts=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="active item">
<?php the_post_thumbnail('', array('class' => 'main-home')); ?>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
<?php query_posts('post_type=features&showposts=4&offset=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item">
<?php the_post_thumbnail('', array('class' => 'main-home')); ?>
</div>
<?php endwhile; endif; ?>
</div>
</div>
<?php wp_reset_query(); ?>
</div>
</div>
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
@MaksymMalin
Copy link

Cool i swear that i have not seen such elegance in few lines. Be the best friend of mine!

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