Как сделать вертикальный карусель с помощью twitter-bootstrap

Я хочу сделать вертикальную карусель. Я использую нокаут для привязки, но я не могу этого сделать. , когда я просматриваю файл, ничего не отображается в данных. Единственное, что отображается, это следующие предыдущие кнопки. как это можно сделать?Как сделать вертикальный карусель с помощью twitter-bootstrap

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 файл я связываясь с Нокаут:

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

источник

2013-08-22 manishkr1608

Ваш код очень трудно понять, вы упускаете важные биты, чтобы помочь нам [воспроизвести] (http://sscce.org) но также добавляет много нерелевантного кода (бит ajax, загрузка css). Пожалуйста, обновите свой вопрос, помогите нам помочь вам. – Jeroen

@Jeroen: на самом деле ajax - это то, где я получаю данные для привязки с помощью нокаута ... я дал все css, которые я пробовал до сих пор ... весь его код, который я пытался сделать до сих пор для этой проблемы ... как в одном из моих предыдущих вопросов какой-то орган сказал мне дать весь код, который был до сих пор проверен до публикации ... спасибо – manishkr1608

Да, конечно, вы должны предоставить все * соответствующий * код, но не обязательно * весь * код, этот затрудняет нам помощь. В любом случае, тот факт, что есть еще код * отсутствует *, является самой большой проблемой в оказании вам помощи. См. Например, [этот jsfiddle со всем кодом] (http://jsfiddle.net/NENtd/): мы не можем ответить на вопрос, используя только это, слишком много пропавших без вести. Пожалуйста, см. [Ссылка, которую я дал ранее] (http://sscce.org) для получения справки о создании хорошего воспроизведения. – Jeroen

это может быть помочь вам. не реагирует, но это может решить проблему относительно вертикальной пирушки

Github

источник

2013-08-28 04:51:00

Как сделать вертикальный карусель с помощью twitter-bootstrap

ответ

Смежные вопросы