1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 <!-- Set a min-height on slider in css -->
<section id="slider" class="row">
<h2 style="display: none;">Carousel</h2>
<div id="carousel" class="carousel slide">
<?php $slider = new WP_Query(array(
'post_type' => 'post',
'cat' => 4,
'posts_per_page' => 7,
'orderby' => 'menu_order',
'order' => 'ASC',
));
$count = 0;
?>
<ol class="carousel-indicators">
<?php while($slider->have_posts()): $slider->the_post(); ?>
<li <?php if ( $count == 0){ echo 'class="active"';} ?> data-target="#carousel" data-slide-to="<?php echo $count++; ?>"></li>
<?php endwhile; wp_reset_postdata(); ?>
</ol>
<div class="carousel-inner">
<?php
$count = 0;
while ($slider->have_posts()) : $slider->the_post();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
?>
<div class="item <?php if ( $count == 0){ echo 'active';};?>" data-slide-number="<?php echo $count++;?>" style="background:url(<?php echo $image[0];?>) no-repeat center; background-size:cover;">
<h3><?php the_title();?></h3>
</div><!-- item active -->
<?php endwhile; wp_reset_postdata(); ?>
</div>
<a class="carousel-control prev" href="#carousel" data-slide="prev"></a>
<a class="carousel-control next" href="#carousel" data-slide="next"></a>
</div><!-- end #carousel -->
</section>
<script>
jQuery(function($){
jQuery('#carousel').carousel({
interval: false
});
});
</script>
wp_nav_menu()
December 8, 2012/ Updated: December 8, 2012