两个在同一页面中滑动时的引导轮播问题答案

【问题标题】：bootstrap carousel problems when two slide in the same page两个在同一页面中滑动时的引导轮播问题
【发布时间】：2015-07-22 12:22:56
【问题描述】：

当我在同一页面中使用多个或两个引导轮播时，会导致问题。这是第一个 prev 和 next 按钮将控制两个引导轮播幻灯片，另一个 prev 和 next 不起作用。怎么解决？？或者我需要更改另一个以使用另一个选项？？

<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">.................
...........................................

【问题讨论】：

标签： twitter-bootstrap carousel

【解决方案1】：

您可能需要更改 href 的 prev 和 next 以定位其父 carousel。该 href 值是引导程序如何确定要滑动的内容。因此，您将需要更改以下内容：

<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>

SOURCE

【讨论】：