我创建了带3个li元素的bootstrap Carousel滑块。我想只显示一个接一个滑动的li元素。
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-column navkey1">
<a href="#myCarousel" data-slide="prev" role="button" href="#javo-wall-of-fame-slider" class="left ">
<label class="keyword-nav"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</label> </a>
<a href="#myCarousel" data-slide="next" role="button" href="#javo-wall-of-fame-slider" class="right ">
<label class="keyword-nav"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span> </label>
</a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-column featured-image resto">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="item active">
<ul class="row">
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 pull-left col-md-4 col-sm-4 col-xs-12 restaurant1">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant 11</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 pull-left restaurant-rating">
<p><span class="rating"> 4.2</span>/10</p>
</div>
</div>
</div>
</div>
</li>
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left restaurant-div restaurant-div-small">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant2">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main2">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant 12</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-8 pull-left restaurant-rating">
<p><span class="rating"> 2.9</span>/10</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left restaurant-div restaurant-div-small">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant3">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main3">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant 13</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-10 pull-left restaurant-rating">
<p><span class="rating"> 3.0</span>/10</p>
</div>
</div>
</div>
</div>
</div>
</li>
</div>
</li>
</div>
<div class="item">
<ul class="row">
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 pull-left col-md-4 col-sm-4 col-xs-12 restaurant1">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant 21</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 pull-left restaurant-rating">
<p><span class="rating"> 4.2</span>/10</p>
</div>
</div>
</div>
</div>
</li>
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left restaurant-div restaurant-div-small">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant2">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main2">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant li 22</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-8 pull-left restaurant-rating">
<p><span class="rating"> 2.9</span>/10</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="simple" id="">
<div class="content-box">
<li class="simple" id="">
<div class="content-box">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left restaurant-div restaurant-div-small">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant3">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 restaurant-main3">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 restaurant-info pull-left">
<h3>Windsol Restaurant 23</h3>
<p> 520 1st floor, Manhattan, New York</p>
<p><i class="fa fa-phone" aria-hidden="true"></i> 215-556-8561</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-10 pull-left restaurant-rating">
<p><span class="rating"> 3.0</span>/10</p>
</div>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 heading ">
<h1>Everyday Interesting</h1>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-column">
<ul id="filters" class="clearfix">
<li class="list-inlines keyword"><span class="filter active" data-filter="aloknath rajni bollywood santa banta sita">ALL</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="sita bollywood">ETIQUETTE</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="rajni aliknath banta">HUMOR</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="sita">LANGUAGE & GRAMMAR</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="bollywood rajni">POLITICS</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="rajni banta sita santa bollywood">TECHNOLOGY</span></li>
<li class="list-inlines keyword"><span class="filter" data-filter="aloknath sita bollywood">YOUTUBE</span></li>
</ul>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-column navkey">
<label class="keyword-nav"><i class="fa fa-angle-left" aria-hidden="true"></i></label>
<label class="keyword-nav"><i class="fa fa-angle-right" aria-hidden="true"></i></label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-column category-images featured-image">
<div id="portfoliolists">
<div class="col-lg-12 ul-wrapper">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio aloknath mix_all" data-cat="aloknath" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div left-pad">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke1">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">ALOK NATH JOKES</span>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio bollywood mix_all" data-cat="bollywood" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke2">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">BOLLYWOOD TWEETS</span>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio rajni mix_all" data-cat="rajni" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke3">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">RAJNIKANTH JOKES</span>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio banta mix_all" data-cat="banta" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke3">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">SANTA N BANTA</span>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio santa mix_all" data-cat="santa" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke3">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">SANTABANTA JOKES</span>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio sita mix_all" data-cat="sita" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left image-div">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 joke3">
<div class="col-lg- col-md-12 col-sm-12 col-xs-12 img-title">
<span class="img-title-main">SITA N GITA </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center heading ">
<h1 style="font-weight: 500;">INFORMATION </h1>
<div class="col-lg-1 col-centered col-md-1 col-sm-1 col-xs-3 underline"></div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-column last-div" id="counters">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left text-right">
<img src="images/listings.png" alt="listings" class="listings"> <br>
<p class="count-top-listings ">200<br></p>
<p class="count-bottom-listings">LISTINGS<br></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left text-center ">
<img src="images/star-ratings.png" alt="listings" class="listings">
<p class="count-top">400<br></p>
<p class="count-bottom">REVIEWS<br></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left text-left">
<img src="images/couple.png" alt="listings" class="listings">
<p class="count-top">400<br></p>
<p class="count-bottom"> USERS<br></p>
</div>
</div>
</div>
答案 0 :(得分：0)
您是说旋转木马没有在您的li元素中旋转吗？它会加载页面上的第一个并且只是坐在那里？
如果是这种情况，您是否在document.ready()
<script>
$function(){
$('#myCarousel').carousel({
interval: 5000 //5 seconds
});
});
</script>