Trying to switch between carousels in Bootstrap

HTML & CSS
, ,
1

I have a few links on the left and I’d like to activate carousels corresponding to those links in the same space on the right. Here is my code…

<body>
<div class="container">
<span class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
  <li role="presentation"><a href="#" data-target="#carousel-example-
generic1" data-slide-to="0">Item 1</a></li>
  <li role="presentation"><a href="#" data-target="#carousel-example-
generic2" data-slide-to="0">Item 2</a></li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
</span>
<span class="col-sm-9">


<div id="carousel-example-generic1" class="carousel slide" data-
ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" 
class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="test1.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test1</h5>
  </div>
</div>
<div class="item">
  <img src="test2.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test2</h5>
  </div>
</div>
<div class="item">
  <img src="test3.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test3</h5>
  </div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1"         
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" 
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<div id="carousel-example-generic2" class="carousel slide disabled" data-
ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="0"></li>
<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="test4.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test4</h5>
  </div>
</div>
<div class="item">
  <img src="test5.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test5</h5>
  </div>
</div>
<div class="item">
  <img src="test6.jpg" alt="...">
  <div class="carousel-caption">
    <h5>test6</h5>
  </div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" 
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" 
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


 </span>
 </div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as 
needed -->
<script src="js/bootstrap.min.js"></script>
</body>

I can’t figure out how to link the nav items on the left to the different carousels. Also the carousels need to deactivate / disappear once another link activates it’s carousel. Is there a javascript / jquery script involved here or is this possible with css / bootstrap? Thanks for your time.

2

I got this sorted using css tabs… Thanks

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.