PhP / bootstrap carousel to show more images
-
0
I am trying to build a carousel from scratch, similar to this one:
I have managed to get the code to call posts but currently it shows the two items together rather than separate / in a row…. also how do I get the indicating dots to count how many posts have been called?
$qargs = array(
‘no_found_rows’ => true,
‘ignore_sticky_posts’ => true,
);
$the_query = new WP_Query( $qargs );
$image= the_post_thumbnail( ‘large’ )
?>
<?php if ( $the_query->have_posts() ) : ?>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-12″>
<div id=”firstcarousel” class=”carousel slide” data-ride=”carousel”>
<!– indicators dot nav –>
<?php
// Carousel items:$counter = 1;
foreach($images->results() as $image){?><div class=”item<?php if($counter <= 1){echo ” active”; } ?>”>
url; ?>” alt=”<?php echo $image->description; ?>”>
</div>
<?php
$counter++;
}
?> <!– Indicators –>-
<?php
$counter = 1;
foreach($images->results() as $image){
?>
<li data-target=”#firstcarousel” data-slide-to=”<?= $counter ?>” <?php if ($counter==1){ ?>class=”active”<?php } ?>><?php
$counter++;
}?>
<div class=”carousel-inner” role: “listbox”>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();?>
<?php $active_class = ( 0 === $the_query->current_post ) ? ‘ active’: ”; ?>
<div class=”carousel item <?php echo esc_attr( $active_class ); ?>”>
<?php the_post_thumbnail( ‘large’ ); ?>
<div class=”carousel-caption”>
<h3 ><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div><!– .carousel-inner –>
<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
<span class=”sr-only”> Previous</span>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”> Next</span>
</div>
</div>
<?php endif; ?>`
`The page I need help with: [log in to see the link]
- The topic ‘PhP / bootstrap carousel to show more images’ is closed to new replies.