【问题标题】:Carousel not rotating after changing to dynamic script更改为动态脚本后轮播不旋转
【发布时间】:2019-12-15 12:39:00
【问题描述】:

我已将轮播的静态代码更改为动态代码。由于某种原因,轮播没有旋转图像。我已将网站上线查看:here

  <?php
  $files = glob('img/carousel/*.*');
  shuffle($files);    
  $no_files = count($files);
  ?>

<header>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <?php
        for ($x = 0; $x <= $no_files; $x++)
        {
            echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$x.'" '; if($x == 0) { echo 'class="active"'; } echo'></li>';
        }
        ?>
    </ol>
    <div class="carousel-inner" role="listbox">

      <?php
      foreach($files as $file)
      {
          echo '<div class="carousel-item active" style="background-image: url('.$file.')">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>';
      }
      ?>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Vorige</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Volgende</span>
    </a>
  </div>
</header>

【问题讨论】:

  • 一个问题是,在您的第二个 PHP 循环中,您将所有项目标记为“活动”类。您应该应用与第一个循环中相同的逻辑,确保只将该类应用于一个元素,而不是全部。
  • Thx trincot...这是我唯一遇到的问题:)

标签: javascript twitter-bootstrap owl-carousel


【解决方案1】:

感谢 trincot 将第二个循环更改为:

  <?php
  $y = 0;
  foreach($files as $file)
  {
      $y++;
      echo '<div class="carousel-item'; if($y == 1) { echo ' active'; } echo'" style="background-image: url('.$file.')">
            <div class="carousel-caption d-none d-md-block">
            </div>
          </div>';
  }
  ?>

【讨论】:

    猜你喜欢
    • 2010-10-16
    • 2021-05-11
    • 1970-01-01
    • 1970-01-01
    • 2022-01-26
    • 1970-01-01
    • 1970-01-01
    • 2016-12-30
    • 1970-01-01
    相关资源
    最近更新 更多