http://www.bootply.com/62742
http://www.bootply.com/63891#
1 $('#myTabs a').click(function (e) {
2 e.preventDefault();
3
4 var url = $(this).attr("data-url");
5 var href = this.hash;
6 var pane = $(this);
7
8 // ajax load from data-url
9 $(href).load(url,function(result){
10 pane.tab('show');
11 });
12 });
13
14 // load first tab content
15 $('#home').load($('.active a').attr("data-url"),function(result){
16 $('.active a').tab('show');
17 });
1 <div class="container-fluid">
2 <ul class="nav nav-tabs" id="myTabs">
3 <li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li>
4 <li><a href="#profile" data-url="/embed/62806/view">Profile</a></li>
5 <li><a href="#messages" data-url="/embed/62807/view">Messages</a></li>
6 </ul>
7
8 <div class="tab-content">
9 <div class="tab-pane active" id="home">This is the home pane...</div>
10 <div class="tab-pane" id="profile"></div>
11 <div class="tab-pane" id="messages"></div>
12 </div>
13 </div>
1 $('#myCarousel').carousel({
2 interval:false // remove interval for manual sliding
3 });
4
5 // when the carousel slides, load the ajax content
6 $('#myCarousel').on('slid', function (e) {
7
8 // get index of currently active item
9 var idx = $('#myCarousel .item.active').index();
10 var url = $('.item.active').data('url');
11
12 // ajax load from data-url
13 $('.item').html("wait...");
14 $('.item').load(url,function(result){
15 $('#myCarousel').carousel(idx);
16 });
17
18 });
19
20 // load first slide
21 $('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
22 $('#myCarousel').carousel(0);
23 });
<div class="container">
<h2>Bootstrap Carousel AJAX Content</h2>
<div class="span5">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item" data-url="/render/62805" data-slide-number="0">
</div>
<div class="item" data-url="/render/62806">
</div>
<div class="item" data-url="/render/62807">
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
