如何在一页上动态制作多个引导轮播滑块答案

【问题标题】：how to make more than one bootstrap carousel slider dynamically on one page如何在一页上动态制作多个引导轮播滑块
【发布时间】：2016-12-22 22:34:22
【问题描述】：

我使用 php 动态创建了多个滑块，但由于具有相同的控制类，上一个或下一个按钮仅在第一个滑块中有效，而在其余滑块中无效，其他滑块不起作用。请帮我解决这个问题。这是我的 php 滑块代码

if($counter == 0)
    {
        //$image_path='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
        $Indicators ='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"  class="active"></li>';
        $slides = '<div class="item active" >
        <div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
       <div class="highlighted">'.$event_category.'</div>
        <div class="highlighted">'.$event_city.'</div>
        <div class="highlighted">'.date_format($startDate,'d F').'</div>
        <div class="pull-right" style="margin-top:270px">
          <a href="event.html" class="btn btn-primary">Book</a>
        </div>
      </div>
      </div>';

      }
else{
    //$image_path .='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
        $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
        $slides .= '<div class="item">
        <div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
        <div class="highlighted">'.$event_category.'</div>
        <div class="highlighted">'.$event_city.'</div>
        <div class="highlighted">'.date_format($startDate,'d F').'</div>
        <div class="pull-right" style="margin-top:270px">
          <a href="event.html" class="btn btn-primary">Book</a>
        </div>
      </div>
      </div>';

}
$counter++;     
        }

        echo '
        <div class="panel panel-default"  style="font-family: Futura,Trebuchet MS,Arial,sans-serif;">
<!-- panel body where slider will work -->
<div class="panel-body">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
     '.$Indicators.'
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    '.$slides.'  
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

【问题讨论】：

标签： php css twitter-bootstrap slider carousel

【解决方案1】：

每个滑块都应该有一个唯一的 ID

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>

如你所见，它控制#carousel-example-generic

子弹也一样

<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>

data-target 定义滑块。

【讨论】：