Last active
August 29, 2015 14:02
-
-
Save jdcauley/0bf670ee966dfd59c407 to your computer and use it in GitHub Desktop.
Better BS + WP Carousel
This file contains hidden or 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
<section class="carousel"> | |
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
<!-- Indicators --> | |
<?php $the_slides_query_ol = new WP_Query('post_type=slides&showposts=3'); ?> | |
<?php if ( $the_slides_query_ol->have_posts() ) : ?> | |
<ol class="carousel-indicators"> | |
<?php while ( $the_slides_query_ol->have_posts() ) : $the_slides_query_ol->the_post(); ?> | |
<li data-target="#slide-<?php the_id(); ?>" data-slide-to="<?php echo $the_slides_query_ol->current_post ?>" class="<?php if( $the_slides_query_ol->current_post == 0 ) echo 'active' ?>"></li> | |
<?php wp_reset_postdata(); ?> | |
<?php endwhile; ?> | |
</ol> | |
<?php endif; ?> | |
<!-- Wrapper for slides --> | |
<?php $the_slides_query = new WP_Query('post_type=slides&showposts=3'); ?> | |
<?php if ( $the_slides_query->have_posts() ) : ?> | |
<div class="carousel-inner"> | |
<?php while ( $the_slides_query->have_posts() ) : $the_slides_query->the_post(); ?> | |
<div class="item <?php if( $the_slides_query->current_post == 0 ) echo 'active' ?>"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-8"> | |
<div class="copy-wrapper"> | |
<h1><?php the_title(); ?></h1> | |
<?php the_content(); ?> | |
</div> | |
</div> | |
<div class="col-sm-4"> | |
<?php if (has_post_thumbnail()): ?> | |
<?php the_post_thumbnail('', array('class' => 'img-responsive')); ?> | |
<?php endif; ?> | |
</div> | |
</div> | |
</div> | |
</div> | |
<?php wp_reset_postdata(); ?> | |
<?php endwhile; ?> | |
</div> | |
<!-- Controls --> | |
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> | |
<span class="glyphicon glyphicon-chevron-left"></span> | |
</a> | |
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> | |
<span class="glyphicon glyphicon-chevron-right"></span> | |
</a> | |
</div> | |
<?php endif; ?> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
grade works well!
any info I would like to create a carousel with more pictures!
can you help me
example
http://sevenx.de/demo/bootstrap-carousel/#.VCRjtedRetR