<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="my-carousel" class="carousel" data-ride="carousel" data-interval="false"> <div class="col-sm-5"> <div class="row"> <div class="col-xs-6"> <div class="goof activate" data-target="#my-carousel" data-slide-to="0"> <h4> One </h4> </div> </div> <div class="col-xs-6"> <div class="goof" data-target="#my-carousel" data-slide-to="1"> <h4> Two </h4> </div> </div> </div> <div class="row"> <div class="col-xs-6"> <div class="goof" data-target="#my-carousel" data-slide-to="2"> <h4> Three </h4> </div> </div> <div class="col-xs-6"> <div class="goof" data-target="#my-carousel" data-slide-to="3"> <h4> Four </h4> </div> </div> </div> <div class="row"> <div class="col-xs-6"> <div class="goof" data-target="#my-carousel" data-slide-to="4"> <h4> Five </h4> </div> </div> <div class="col-xs-6"> <div class="goof" data-target="#my-carousel" data-slide-to="5"> <h4> Six </h4> </div> </div> </div> </div> <div class="col-sm-7"> <div class="carousel-inner" role="listbox"> <div class="item active gaf"> <h3>1</h3> </div> <div class="item gaf"> <h3>2</h3> </div> <div class="item gaf"> <h3>3</h3> </div> <div class="item gaf"> <h3>4</h3> </div> <div class="item gaf"> <h3>5</h3> </div> <div class="item gaf"> <h3>6</h3> </div> </div> </div> </div> </div> </div>

.goof{ height: 100px; background: #ccc; margin: 4px -11px; padding: 50px 10px 10px 10px; position: relative; } .goof h4{ position: absolute; left: 5%; top: 60%; color: #0095d9; font-size: 16px; font-weight: bold; } .activate{ background-color: #0095d9; } .activate h4{ color: #fff; } .gaf{ height: 328px; background: green; margin: -14px 0; } .gaf h3{ padding: 10px; color: #fff; }

$('#my-carousel .goof').click(function(e){ $('#soln-slide-1 .goof').removeClass('activate'); $(this).addClass('activate'); });