I am trying to add dynamic WordPress-bootstrap carousel by category. It is showing images but not as carousel. All images are aligned vertically. Second, url is not working also.
Please help me to integrate properly. Any help will be appreciated.
Here is my code
<?php
$catquery = new WP_Query( 'cat=33&posts_per_page=3' );
if( $catquery->have_posts() ): ?>
<div class="row">
<div class="col-xs-12">
<!--Twitter bootstrap Photo carousel-->
<div id="myCarousel" class="carousel slide center-block" data-ride="carousel" >
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while( $catquery->have_posts() ) : $catquery->the_post(); $index++ ?>
<?php if ( $index == 1 ): ?>
<div class="item active">
<?php else: ?>
<div class="item">
<?php endif; ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!-- carousel ends here -->
I am trying to add dynamic WordPress-bootstrap carousel by category. It is showing images but not as carousel. All images are aligned vertically. Second, url is not working also.
Please help me to integrate properly. Any help will be appreciated.
Here is my code
<?php
$catquery = new WP_Query( 'cat=33&posts_per_page=3' );
if( $catquery->have_posts() ): ?>
<div class="row">
<div class="col-xs-12">
<!--Twitter bootstrap Photo carousel-->
<div id="myCarousel" class="carousel slide center-block" data-ride="carousel" >
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while( $catquery->have_posts() ) : $catquery->the_post(); $index++ ?>
<?php if ( $index == 1 ): ?>
<div class="item active">
<?php else: ?>
<div class="item">
<?php endif; ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!-- carousel ends here -->
Share
Improve this question
edited Jan 21, 2019 at 6:19
Chandan
asked Jan 13, 2019 at 10:26
ChandanChandan
13 bronze badges
3
- What URL is not working - the image URLs? – WebElaine Commented Jan 14, 2019 at 21:46
- You might need to manually initialize the carousel as well. getbootstrap/docs/4.0/components/carousel/#via-javascript – WebElaine Commented Jan 14, 2019 at 21:46
- i have added the image, which i am having issue. – Chandan Commented Jan 21, 2019 at 6:19
1 Answer
Reset to default -1it seems that all sliders not active you must first assign value to $index = 1 before loop then in the end of loop it increase before endwhile $index++