结合侧边栏菜单和旋转木马

Question

我有侧边栏菜单和自举旋转木马，我设法将旋转木马连接到侧边栏菜单，这样根据旋转木马中显示的项目，菜单中的相应选项会突出显示。

如何以相反的方式执行此操作，以便从菜单中选择一个选项时，将显示轮播中的相应项目。

这是我的代码：

$('.carousel').on('slid.bs.carousel', function() {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

  $('.result p')
    .removeClass('active-p')
    .eq(currentIndex)
    .addClass('active-p');
});

.active-p {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="sideMenu_div" class="result">
  <p class="active-p">Option 1</p>
  <p> Option 2</p>
  <p> Option 3</p>
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div>Item 1</div>
    </div>
    <div class="item">
      <div>Item 2</div>
    </div>
    <div class="item">
      <div>Item 3</div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

使用jQuery查找索引并告诉Bootstrap轮播移动到该索引。

＆＃13;

＆＃13;

$('.carousel').on('slid.bs.carousel', function() {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

  $('.result p')
    .removeClass('active-p')
    .eq(currentIndex)
    .addClass('active-p');
});

$('#sideMenu_div>p').on('click', function(e) {
  var currentIndex = $(this).index();
  $('#myCarousel').carousel(currentIndex);
})

＆＃13;

.active-p {
  background-color: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="sideMenu_div" class="result">
  <p class="active-p">Option 1</p>
  <p> Option 2</p>
  <p> Option 3</p>
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div>Item 1</div>
    </div>
    <div class="item">
      <div>Item 2</div>
    </div>
    <div class="item">
      <div>Item 3</div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;