如何在轮播中修复引导空幻灯片

时间:2017-02-27 10:25:59

标签: css wordpress twitter-bootstrap

我遇到了bootstrap轮播的问题。当我返回到站点的选项卡时,它会显示空幻灯片和幻灯片。我正在使用wordpress。我认为空是幻灯片的包装。但是为什么在返回选项卡时幻灯片会变得怪异。

enter image description here

你能帮忙吗?下面是我的wordpress和bootstrap轮播。

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<?php

    $rows = get_field('slidershow', 25);
    $row_count = count($rows);

?>

  <!-- Indicators -->
  <ol class="carousel-indicators">

  <?php for($counter = 0; $counter < $row_count; $counter++): ?>

  <?php if($counter == 0): ?>
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <?php else: ?>
      <li data-target="#myCarousel" data-slide-to="<?php echo $counter; ?>"></li>
  <?php endif; endfor; ?>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php 

    $images = get_field('slidershow', 25);

    $counter = 0;

    if( $images ): ?>

    <?php foreach( $images as $image ): ?>

      <?php if($counter == 0): ?>

        <div class="item active">
          <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
          <div class="carousel-caption">
            <h3><?php echo $image['alt']; ?></h3>
            <p><?php echo $image['description']; ?></p>
          </div>
        </div>

      <?php else: ?>

        <div class="item">
          <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
          <div class="carousel-caption">
            <h3><?php echo $image['alt']; ?></h3>
            <p><?php echo $image['description']; ?></p>
          </div>
        </div>

      <?php endif; $counter++; ?>
    <?php endforeach; ?>
    <?php endif; ?>

  </div>


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

0 个答案:

没有答案