$(document).ready(function(){ $(function() { setInterval( function(){ var $active = $('#accordion .collapse.in'); var $parent = $active.closest('.panel'); $active.collapse('hide'); if ($parent.is('#accordion .panel:last')) { $('#accordion .panel:first').find('.collapse').collapse('toggle'); } else { $parent.next().find('.collapse').collapse('toggle'); } }, 10000 ); }); });
<div class="container"> <div class="row"> <div class="content"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Suzuki </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <img src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" /> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Chevrolet </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <img src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" /> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Volvo </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <img src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" /> </div> </div> </div> </div> </div> </div> </div>
html, body { background-color:#e9eaed; } .content { width:960px; height:0px; margin-right: auto; margin-left: auto; } .panel-group { width:430px; z-index: 100; -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; } .panel-heading { width: 430px; } .panel-title { height:18px } .panel-title a { float:right; text-decoration:none; padding: 10px 430px; margin: -10px -430px; } .panel-body { height:830px; } .panel-group img { -webkit-backface-visibility: hidden; -webkit-transform: translateX(-100%) rotate(90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(90deg); transform-origin: right top; } .panel-group .panel img { margin-left:400px; margin-top:800px; position: absolute; }