Bootstrap Karussell funktioniert nicht richtig

Question

Ich habe ein Bootstrap Karussell auf meiner Seite und es funktioniert nicht richtig. Ich zeige 6 Artikel aus meiner Datenbank an, aber ich möchte nur 3 Artikel auf der ersten Karussellseite und dann 3 auf der nächsten. Stattdessen werden alle Elemente auf einer einzelnen Seite angezeigt.

hier ist mein Code

<div class="row"> 
     <div class="carousel slide" data-ride="carousel" data-interval="9000"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <ul class="thumbnails" data-bind="foreach: myMovies"> 
         <li class="col-md-4"> 
          <div class="fff"> 
           <div class="thumbnail"> 
            <a href="#"><img src="some image src"></a> 
           </div> 
           <div class="caption"> 
            <h4 data-bind="text: Movies().Title"></h4> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <nav> 
       <ul class="control-box pager"> 
        <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li> 
        <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 

und mein css

img { 
    max-width: 100%; 
} 

.thumbnails li > .fff .caption { 
    background: #fff !important; 
    padding: 10px 
} 

ul.thumbnails { 
    margin-bottom: 0px; 
} 

.caption h4 { 
    color: #444; 
    text-align: center !important; 
} 

.caption p { 
    color: #999; 
} 

li { 
    list-style-type: none; 
} 

#caption-value { 
    background-color: lightgray !important; 
    margin-bottom: 20px; 
} 

@media (max-width: 767px) { 
    .page-header, .control-box { 
     text-align: center; 
    } 
} 

@media (max-width: 479px) { 
    .caption { 
     word-break: break-all; 
    } 
} 

ul.thumbnails { 
    padding: 0; 
} 

Wo scheint ein Problem zu sein?

Answer 1

ul.thumbnails { 
 
    margin-bottom: 0px; 
 
} 
 

 
.caption h4 { 
 
    color: #444; 
 
    text-align: center !important; 
 
} 
 

 
.caption p { 
 
    color: #999; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
#caption-value { 
 
    background-color: lightgray !important; 
 
    margin-bottom: 20px; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .page-header, .control-box { 
 
     text-align: center; 
 
    } 
 
} 
 

 
@media (max-width: 479px) { 
 
    .caption { 
 
     word-break: break-all; 
 
    } 
 
} 
 

 
ul.thumbnails { 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <ul class="thumbnails" data-bind="foreach: myMovies"> 
 
     <li class="col-md-4"> 
 
      <div class="fff"> 
 
      <div class="thumbnail"> 
 
       <a href="#"><img src="http://placehold.it/200x50"></a> 
 
      </div> 
 
      <div class="caption"> 
 
       <h4 data-bind="text: Movies().Title"></h4> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="item"> 
 
     <ul class="thumbnails" data-bind="foreach: myMovies"> 
 
     <li class="col-md-4"> 
 
      <div class="fff"> 
 
      <div class="thumbnail"> 
 
       <a href="#"><img src="http://placehold.it/200x50"></a> 
 
      </div> 
 
      <div class="caption"> 
 
       <h4 data-bind="text: Movies().Title"></h4> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
    <nav> 
 
    <ul class="control-box pager"> 
 
     <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li> 
 
     <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li> 
 
       </ul> 
 
      </nav> 
 
    
 
</div>