$(document).ready(function() {
$("#owl-example1").owlCarousel({
loop:true,
items:2,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:true
},
600:{
items:2,
nav:true
},
1000:{
items:2,
nav:true,
loop:true
}
}
});
$("#owl-example2").owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:true
},
600:{
items:2,
nav:true
},
1000:{
items:2,
nav:true,
loop:true
}
}
});
$("#owl-example3").owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:true
},
600:{
items:2,
nav:true
},
1000:{
items:2,
nav:true,
loop:true
}
}
});
});
/*
http://stackoverflow.com/questions/36077159/owl-carousel-2-inside-bootstrap-accordion-working-only-on-window-resize*/
.itemC{
background:#ccc;
height: 100px;
width:90%;
margin:0 auto;
text-align:center;
}
#owl-example1 .itemC{
background:tomato;
}
#owl-example3 .itemC{
background:tan;
}
#owl-example2 .itemC{
background:#ff8800;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div id="owl-example1" class="owl-carousel">
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div id="owl-example2" class="owl-carousel">
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div id="owl-example3" class="owl-carousel">
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
<div><div class="itemC"> Your Content </div></div>
</div>
</div>
</div>
</div>
</div>
兩個項目顯示手段? – anu
是的,我想要顯示兩個iitems –