Question

我想制作垂直旋转木马。我正在使用淘汰赛进行绑定，但我无法这样做。当我查看文件时，数据中没有任何内容显示出来。只有显示的东西是下一个上一个按钮。怎么做？

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>

JS文件我与Knockout绑定：

 $.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;
}

Answer 1

这可能会对你有所帮助。没有响应但它可以解决您关于垂直转盘的问题

Github

如何使用twitter-bootstrap制作垂直旋转木马

1 个答案: