KO Carousel Beispiel funktioniert nicht

Question

Ich möchte eine Karussell-Komponente in Knockout.js erstellen Ich gab ein Knockout Karussell Beispiel von jsfiddle.net. Hier ist der Quellcode für sie:

html:

<!-- start main slider carousel --> 
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
       <!-- main slider carousel items --> 
       <!-- ko foreach:imagePaths --> 
       <div class="carousel-inner"> 
        <div data-bind='attr:{"data-slide-number": $index, "class": "item" }, css: {"active": $index() == 0}'> 
         <img data-bind='attr:{src: link, height: 200, width: 132, "class": "img-responsive", alt: alt }' /> 
        </div> 
       </div> 
       <!-- /ko --> 
       <!-- main slider carousel nav controls --> 
       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 
<!-- end main slider carousel--> 
<!-- start thumb navigation carousel --> 
<div class="col-md-6 offset-top_1" id="slider-thumbs"> 

    <!-- thumb navigation carousel items --> 
    <ol class="list-inline"> 
     <!-- ko foreach:imagePaths --> 
     <li data-bind="attr: { 'data-slide-to': $index }"> 
      <a data-bind='attr:{"id": "carousel-selector-"+ $index() }'> 
       <img data-bind="attr:{src: link, height: 20, width: 12, alt: alt }" /> 
      </a> 
     </li> 
     <!-- /ko --> 
    </ol> 

</div> 
<!-- end thumb navigation carousel --> 

javascript:

var Image = function (data) { 
    var self = this; 
    self.alt = data.alt; 
    self.link = data.link; 
    self.title = data.title; 
    self.active = data.active; 
}; 

var CarouselViewModel = function (params) { 

    var self = this; 

    self.selectedImageIndex = ko.observable(params && params.selectedImageIndex || 0); 
    self.imagePaths = ko.observableArray(params && params.imagePaths || []); 
    self.addImage = function(img) { 
     self.imagePaths.push(img); 
    }; 

} 

var viewModel = new CarouselViewModel({selectedImageIndex: 0, imagePaths: [] }); 
ko.applyBindings(viewModel); 
viewModel.addImage({ 
alt: 'yellowstone-77', 
link: 'https://pshabalin.files.wordpress.com/2013/01/yellowstone-77.png', 
title: 'yellowstone-77'}); 

    viewModel.addImage({ 
    alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/yellowstone-58.png', 
    title: 'yellowstone-58'}); 

    viewModel.addImage({ 
    alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/img_1082.png', 
    title: 'img_1082.png'}); 

    viewModel.addImage(
    {alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/dscn2295.png', 
    title: 'dscn2295'}); 

jsfiddle.net reference

, aber ich kann es nicht richtig arbeiten lernen. Kann mir jemand helfen, das zu beheben?

Answer 1

Ihre erste <!-- ko foreach:imagePaths --> ist falsch positioniert. Es sollte innerhalb des <div class="carousel-inner"> sein und es nicht enthalten.

Überprüfen Sie das Karussell in der folgenden festen jsfiddle arbeiten: https://jsfiddle.net/elbecita/0L9vb3m4/58/

Answer 2

Die Antwort von @elbecita ist richtig. Ich habe es ein wenig aufgemotzt. Hier

.carousel-active-thumb { 
    border-bottom: 5px solid #000; 
    padding: 5px; 
    margin: 2px; 
} 

.carousel-thumb { 
    border-bottom: 5px solid #fff; 
    padding: 5px; 
    margin: 2px; 
} 

.carousel-thumbnail-center { 
    text-align: center; 
} 

.carousel-thumbnail-center ol { 
    display: inline-block; 
    padding: 0; 
    /* For IE */ 
    zoom: 1; 
    *display: inline; 
} 

.carousel-inner > .item > img { 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    height: 350px; 
    width: auto; 
} 

.carousel-active-thumb a img { 
    height: 41px; 
    width: auto; 
} 

.carousel-thumb a img { 
    height: 41px; 
    width: auto; 
} 

ist die Geige hierfür:

bootstrap carousel in jsfiddle

Ich hoffe, das jemand helfen kann.