title: how to make vertical carousal using twitter-bootstrap
body: <p>I want to make vertical carousel. I'm using knockout for binding but i am unable to do so. 
  when i view the file nothing in the data is getting displayed. Only thing that is getting displayed is next prev buttons.
  how it can be done?</p>
  
  <p>html is as below:</p>
  
  <pre><code>&lt;div class="middleLeftDiv"&gt;
      &lt;div id="myCarousel" class="carousel slide vertical" data-bind="foreach: AssociationTypes"&gt;
          &lt;div class="carousel-inner clickable" data-bind="attr: { id: ObjectAssociationType }" onclick="onSelectAssociation(this)"&gt;
              &lt;div class="active item"&gt;
                  &lt;span class="veticaltextname1" data-bind="text: ObjectAssociationType"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Carousel nav --&gt;
          &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
          &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS file i'm binding with Knockout:</p>
  
  <pre><code> $.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();
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>