サイドバーメニューとカルーセルを結合する

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を使ってインデックスを検索し、そのインデックスに移動するブートストラップカルーセルを伝える：

は、ここに私のコードです。

$('.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); 
 
})

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