WordPress Bootstrap动态旋转木马单独显示图像,而不是作为旋转木马

时间:2019-01-13 作者:Chandan

enter image description here

我正在尝试按类别添加动态WordPress引导转盘。它显示的是图像,但不是旋转木马。所有图像都垂直对齐。其次,url也不起作用。

请帮助我正确集成。任何帮助都将不胜感激。

这是我的密码

<?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 -->

1 个回复
SO网友:hai_shar

似乎所有未激活的滑块都必须首先在循环之前将值赋给$index=1,然后在循环结束时,它在结束之前增加,而$index++

相关推荐

Images with overlay

我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {