如何在一页上动态制作多个 bootstrap 轮播滑块

Question

我使用 php 动态创建了多个滑块，但上一个或下一个按钮仅在第一个滑块中起作用，而不在其余滑块中起作用，因为在控件中具有相同的 class，其他按钮不起作用在职的。请帮我解决这个问题。这是我的滑块代码 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>

`

Answer 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 定义滑块。

如何在一页上动态制作多个 bootstrap 轮播滑块

how to make more than one bootstrap carousel slider dynamically on one page

css

php

slider

carousel

twitter-bootstrap