$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>WordPress Bootstrap dynamic carousel showing images separately not as carousel|Programmer puzzle solving
最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

WordPress Bootstrap dynamic carousel showing images separately not as carousel

matteradmin10PV0评论

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
Add a comment  | 

1 Answer 1

Reset to default -1

it 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++

Post a comment

comment list (0)

  1. No comments so far