我想做垂直旋转木马。我正在使用淘汰赛进行绑定,但我无法这样做。当我查看文件时,数据中没有任何内容显示。唯一显示的是下一个上一个按钮。怎么做?
html如下:
<div class="middleLeftDiv">
<div id="myCarousel" class="carousel slide vertical" data-bind="foreach: AssociationTypes">
<div class="carousel-inner clickable" data-bind="attr: { id: ObjectAssociationType }" onclick="onSelectAssociation(this)">
<div class="active item">
<span class="veticaltextname1" data-bind="text: ObjectAssociationType"/>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
我与 Knockout 绑定的 JS 文件:
$.ajax({
type: "POST",
url: '/member/GetMemberItems',
data: ko.toJSON({ typeOfMedia: typeOfMedia }),
contentType: "application/json",
success: function (response) {
if (!hasError(response)) {
self.Association(response);
}
}
});
$('.carousel').carousel();
CSS:
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 100%;
}
.carousel.vertical .prev {
top: -100%;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -100%;
}
.carousel.vertical .active.right {
top: 100%;
}
.carousel.vertical .item {
left: 0;
}