引导旋转问题，当两个幻灯片在同一页

Question

当我在同一页面中使用多个或两个bootstrap carousel时，它将导致问题。这是第一个前置和下一个按钮将控制两个引导旋转木马幻灯片和另一个前置和下一个不工作。如何解决??或者我需要改变另一个使用另一个选项??

<div class="container">
      <div class="row">
          <div class="inner-box relative">
            <h2 class="title-2">Your Interested Items 
                        <a id="nextItem" class="link  pull-right carousel-nav"> <i class="icon-right-open-big"></i></a>
             <a id="prevItem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a>
            </h2>
            <div class="row">
              <div class="col-lg-12">
                <div class="no-margin item-carousel owl-carousel owl-theme">
                    <div class="item">.................
...........................................
<div class="container">
      <div class="row">
          <div class="inner-box relative">
            <h2 class="title-2">Your Interested Items 
                        <a id="nextItem" class="link  pull-right carousel-nav"> <i class="icon-right-open-big"></i></a>
             <a id="prevItem" class="link pull-right carousel-nav"> <i class="icon-left-open-big"></i> </a>
            </h2>
            <div class="row">
              <div class="col-lg-12">
                <div class="no-margin item-carousel owl-carousel owl-theme">
                    <div class="item">.................
...........................................

Answer 1

您可能需要针对其父carousel更改prev和next中的href。这个href值是bootstrap决定滑动哪个的方法。因此，您需要更改以下内容:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

第二个旋转木马:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>