<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-md-12"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="text-center hprice">Basic</h3> <p class="text-center">Monthly Rental</p> </div> <div class="panel-body text-center"> <h3 class="hprice pricetag"> <span class="symbol">$</span>32 <span class="symbol">95c</span></h3> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-earphone"></span> Local Calls <span class="feature_desc">20c per call</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone-alt"></span> National Calls <span class="feature_desc">18c p/m</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> Mobile Calls <span class="feature_desc">30c p/m</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> 13/1300 Calls <span class="feature_desc">37c per call</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> International Calls <span class="feature_desc"> </span> </li> </ul> <div class="panel-footer btn-hide"> <a class="btn btn-lg btn-block btn-danger " href="#">Order Now</a> </div> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="text-center hprice">Saver</h3> <p class="text-center">Monthly Rental</p> </div> <div class="panel-body text-center"> <h3 class="hprice pricetag"> <span class="symbol">$</span>46</h3> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-earphone"></span> Local Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone-alt"></span> National Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> Mobile Calls <span class="feature_desc">30c p/m</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> 13/1300 Calls <span class="feature_desc">37c per call</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> International Calls <span class="feature_desc"> </span> </li> </ul> <div class="panel-footer btn-hide"> <a class="btn btn-lg btn-block btn-danger " href="#">Order Now</a> </div> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="text-center hprice">Premium</h3> <p class="text-center">Monthly Rental</p> </div> <div class="panel-body text-center"> <h3 class="hprice pricetag"> <span class="symbol">$</span>85</h3> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-earphone"></span> Local Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone-alt"></span> National Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> Mobile Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> 13/1300 Calls <span class="feature_desc">37c per call</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> International Calls <span class="feature_desc"> </span> </li> </ul> <div class="panel-footer btn-hide"> <a class="btn btn-lg btn-block btn-danger btn-hide" href="#">Order Now</a> </div> </div> </div> </div> <div class="item"> <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="text-center hprice">Ultimate</h3> <p class="text-center">Monthly Rental</p> </div> <div class="panel-body text-center"> <h3 class="hprice pricetag"> <span class="symbol">$</span>95</h3> </div> <ul class="list-group list-group-flush text-center"> <li class="list-group-item"> <span class="glyphicon glyphicon-earphone"></span> Local Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone-alt"></span> National Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> Mobile Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> 13/1300 Calls <span class="feature_desc">Free</span> </li> <li class="list-group-item"> <span class="glyphicon glyphicon-phone"></span> International Calls <span class="feature_desc"> </span> </li> </ul> <div class="panel-footer btn-hide"> <a class="btn btn-lg btn-block btn-danger " href="#">Order Now</a> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div>

.carousel-inner .active.left { left: -33%; } .carousel-inner .next { left: 33%; } .carousel-inner .prev { left: -33%; } .carousel-control.left, .carousel-control.right { background-image: none; } .item:not(.prev) { visibility: visible; } .item.right:not(.prev) { visibility: hidden; } .rightest { visibility: visible; }

$('#myCarousel').carousel({ interval: 40000 }); $('.carousel .item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest'); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });