Combine sidebar menu and carousel

Question

I have a sidebar menu and a bootstrap carousel and I managed to connect the carousel to the sidebar menu such that according to what item is shown in the carousel, the corresponding option in the menu is highlighted.

How can I do this the other way around such that when an option is selected from the menu, the appropriate item in the carousel is shown.

Here is my code:

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

Find the index with jQuery and tell the Bootstrap carousel to move to that index.

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