"News Carousel"
Bootstrap 3.1.0 Snippet by joshuaedwardk

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/760x400/cccccc/ffffff"> <div class="carousel-caption"> <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">magna aliquyam erat, sed diam voluptua</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="list-group col-sm-4"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li> </ul> <!-- Controls --> <div class="carousel-controls"> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- End Carousel --> </div> <div class="jumbotron"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <h2></h2> <img class="img-responsive pull-right" src="//www.nstp.org/image/NSTP_logo200x200.png"> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> <div class="page-header"> <div class="page-header-caption"> <h2>National Society of Tax Professionals<br/><p> Serving the Tax Profession since 1985</p></h2> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <h3 class="text-primary"><i class="fa fa-home pull-left fa-blue fa-2x"></i>Welcome</h3> <p>Our ongoing commitment to you is to be the best partner a tax professional can have.</p> <p>NSTP exists to help the tax professional achieve the outcome of serving their clients with skill, knowledge and expertise in a relationship that benefits both client and tax professional.</p> <p>We are dedicated to facilitating the success of tax professionals like you through education, technical support, a world-class website, our exceptional newsletter <em>Federal Tax Alert</em> and so much more.</p> <p>Finally you have found an organization that will help you succeed in the tax business whether you are a brand new practitioner or a seasoned professional!</p> </p> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <h3 class="text-danger"><i class="fa fa-user pull-left fa-red fa-2x"></i>Why you should Join NSTP!</h3> <p>NSTP leads the way for tax professionals to develop, grow and enhance their business.</p> <p>With IRS regulation of tax practices and the increase in tax preparer responsibilities under the Affordable Care Act, it is essential to understand how to comply while using best practices to serve your clients.</p> <p>Our top-notch instructors teach not only about the tax law but how to apply complex tax rules to individual situations. NSTP provides live presentations, self-study courses and webinars for CE credit. In addition our tax hotline has unlimited calls available for members. Join today!</p> <a class="btn btn-sm btn-danger" href="//nstp.org/whyjoin.php">More Information</a> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <h4><i class="fa fa-calendar fa-2x"></i><strong> April Events</strong></h4> <div class="list-group"> <a href="//nstp.org/webinar.php" class="list-group-item list"><span class="badge">April 25, 2014</span>Webinars</a> </div> <h4><i class="fa fa-file fa-2x"></i><strong> NSTP News</strong></h4> <div class="list-group"> <a href="//nstp.org/self_study/2013_dvd.php" class="list-group-item list"><span class="badge">Now</span>DVD Released!</a> </div> </div> </div> <!-- /.row --> </div><!-- /.container --> <hr> <!--============(SPECIAL TOPIC EARLY BIRD)====================--> <div class="section-colored"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2 class="text-primary">Register Early for 2014 Special Topics Amazing Deals</h2> <hr> <ul id="myTab" class="nav nav-tabs nav-justified"> <li class="active"><a href="#service-one" data-toggle="tab">2014 Napa Special Topics Workshop</a></li> <li><a href="#service-two" data-toggle="tab">2014 Williamsburg Special Topics Workshop</a></li> </ul> <!--NAPA--> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="service-one"> <div class="col-lg-4 col-md-4 col-sm-4"> <img src="//www.nstp.org/image/embassy_hotel.jpg" class=" img-thumbnail" alt="Responsive image"><a href="//embassysuites3.hilton.com/en/hotels/california/embassy-suites-napa-valley-NAPVLES/maps-directions/index.html" target="_blank"><h4>Embassy Suites Hotel Napa</h4></a> <p>1075 California Boulevard </p> <p>Napa, California 94559 </p> <i class="fa fa-phone fa-blue"></i> Phone: <a href="tel:1-800-2779">(800)-362-2779</a> <hr> <p>Room Rate: $179 per night </p> <p>Rate available, July 20-22, 2014 </p> <p>Hotel Cutoff Date: July 17, 2014</p> <p>Group Code: NST or mention NSTP</p> </div> <div class="col-lg-7 col-md-7 col-sm-7"> <h2 class="text-primary">2014 Napa Special Topics Workshop</h2> <h3 class="text-primary">July 21-23, 2014</h3> <table class="table table-hover table-condensed"> <thead> <tr> <th>Napa Course</th> <th>Member</th> <th>Non-Member</th> </tr> </thead> <tbody> <tr class="default"> <td> <p>Ethics:</p> </td> <td>$75</td> <td>$100</td> </tr> <tr> <td> <p>Executive Session:</p> </td> <td>$150</td> <td>$185</td> </tr> <tr> <td> <p>Exec. Session & Ethics:</p> </td> <td>$200</td> <td>$250</td> </tr> <tr> <td> <p>Special Topics Workshop:</p> </td> <td>$300</td> <td>$350</td> </tr> <tr> <td> <p>Special Topics & Ethics:</p> </td> <td>$350</td> <td>$425</td> </tr> <tr> <td> <p>Special Topics & Exec. Session:</p> </td> <td>$375</td> <td>$450</td> </tr> <tr> <td> <p class="text-danger">All Three (3) Events:*</p> </td> <td class="text-danger">$425*</td> <td class="text-danger">$525*</td> </tr> </tbody><!--============(/.tbody NAPA)====================--> </table><!--============(/.table NAPA)====================--> <dl class="dl"> <dt class="text-danger"> *Register April 1, 2014 - May 31, 2014 for all 3 events: </dt> <dd> Enjoy a $25.00 discount on registration </dd> <dd class="text-danger">Non-Member rate includes 6 months FREE membership </dd> </dl><!--============(/.dl NAPA)====================--> <a class="btn btn-danger" href="http://www.nstp.org/course/2014-Napa-Special-Topics-Workshop" target="_blank">Register for Napa ST</a> <a class="btn btn-primary pull-right" href="//nstp.org/2014_st/napa.php">More Information about Napa</a> </div><!--============(/.div class="col-lg-7 col-md-7 col-sm-7 NAPA)====================--> </div> <!--============(WILLIAMSBURG BEGINNING)====================--> <div class="tab-pane fade" id="service-two"> <div class="col-sm-4"> <img class=" img-thumbnail" alt="Holiday Inn" src="//www.nstp.org/image/holiday_inn.jpg"> <a href="//www.ihg.com/holidayinn/hotels/us/en/williamsburg/wbgrm/hoteldetail" target="_blank"><h4>Holiday Inn Patriot</h4></a> <p>3032 Richmond Road</p> <p>Williamsburg, VA 23185 </p> <p><i class="fa fa-phone fa-blue"></i> Phone: <a href="tel:1-757-565-2600">(757) 565-2600</p></a> <hr> <p>Room Rate: $74.00 plus 11% Tax + $2.00</p> <p>occupancy tax per room night</p> </div> <div class="col-lg-7 col-md-7 col-sm-7"> <h2 class="text-primary">2014 Williamsburg Special Topics Workshop</h2> <h3 class="text-primary">June 25-27, 2014</h3> <!--============(/.dl WILLIAMSBURG)====================--> <!--============(/.table Williamsburg)====================--> <table class="table table-hover table-condensed"> <thead> <tr> <th>Williamsburg Course</th> <th>Member</th> <th>Non-Member</th> </tr> </thead> <tbody> <tr class="default"> <td> <p>Ethics:</p> </td> <td>$75</td> <td>$100</td> </tr> <tr> <td> <p>Executive Session:</p> </td> <td>$129</td> <td>$165</td> </tr> <tr> <td> <p>Exec. Session & Ethics:</p> </td> <td>$159</td> <td>$199</td> </tr> <tr> <td> <p>Special Topics Workshop:</p> </td> <td>$275</td> <td>$325</td> </tr> <tr> <td> <p>Special Topics & Ethics:</p> </td> <td>$300</td> <td>$375</td> </tr> <tr> <td> <p>Special Topics & Exec. Session:</p> </td> <td>$329</td> <td>$399</td> </tr> <tr> <td> <p class="text-danger">All Three (3) Events:*</p> </td> <td class="text-danger">$379*</td> <td class="text-danger">$479*</td> </tr> </tbody><!--============(/.tbody NAPA)====================--> </table><!--============(/.table NAPA)====================--> <dl class="dl"> <dt class="text-danger"> *Register April 1, 2014 - May 31, 2014 for all 3 events: </dt> <dd> Enjoy a $25.00 discount on registration </dd> <dd class="text-danger">Non-Member rate includes 6 months FREE membership </dd> </dl><!--============(/.dl WILLIAMSBURG)====================--> <a class="btn btn-danger" href="http://www.nstp.org/course/2014-Williamsburg-Special-Topics-Workshop" target="_blank">Register for Williamsburg ST</a> <a class="btn btn-primary pull-right" href="//nstp.org/2014_st/williamsburg.php">More Information about Williamsburg</a> </div><!--============(/.div class="col-lg-7 col-md-7 col-sm-7 NAPA)====================--> </div> </div> </div> <!-- /.container --> </div> </div> </p> </div>
body { padding-top: 50px; } #myCarousel .carousel-caption { left:0; right:0; bottom:0; text-align:left; padding:10px; background:rgba(0,0,0,0.6); text-shadow:none; } #myCarousel .list-group { position:absolute; top:0; right:0; } #myCarousel .list-group-item { border-radius:0px; cursor:pointer; } #myCarousel .list-group .active { background-color:#eee; } @media (min-width: 992px) { #myCarousel {padding-right:33.3333%;} #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} }
$(document).ready(function(){ var boxheight = $('.carousel-inner').height(); var itemlength = $('.item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('.list-group-item').outerHeight(triggerheight); //maybe Bootsnipp only //$('.list-group-item').height(triggerheight); //works fine in local testing var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); })

Related: See More


Questions / Comments: