2013-08-22 4 views
0

Je veux faire un carrousel vertical. J'utilise knock-out pour la liaison, mais je suis incapable de le faire. lorsque je vois le fichier rien dans les données ne s'affiche. La seule chose qui s'affiche est les prochains boutons prev. comment cela peut-il être fait?comment faire un carrousel vertical en utilisant twitter-bootstrap

html est comme ci-dessous:

<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> 

Le fichier JS je suis lier avec knock-out:

$.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(); 

Le 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; 
} 
+0

Votre code est très difficile à saisir, vous manque des bits essentiels pour nous aider [reproduire] (http://sscce.org) la problème, mais aussi en ajoutant beaucoup de code non pertinent (le bit ajax, des charges de CSS). Veuillez mettre à jour votre question, aidez-nous à vous aider. – Jeroen

+0

@Jeroen: en fait l'ajax est où je vais obtenir les données à lier en utilisant knockout ... j'ai donné tous les css que j'ai essayé jusqu'à présent ... tout son code que j'ai essayé jusqu'à présent pour ce problème ... comme dans l'une de mes questions précédentes, un certain corps m'a dit de donner tout le code qui a été essayé jusqu'à présent avant de poster ... merci – manishkr1608

+0

Oui, bien sûr, vous devez fournir tout le * code * pertinent, mais pas nécessairement * tout * code, ce il est plus difficile pour nous de vous aider. Dans tous les cas, le fait qu'il y ait encore du code * manquant * est le plus gros problème pour vous aider. Voir par exemple [ceci jsfiddle avec tout votre code] (http://jsfiddle.net/NENtd/): nous ne pouvons pas répondre à la question en utilisant seulement cela, il manque juste trop de choses. S'il vous plaît voir [le lien que j'ai donné plus tôt] (http://sscce.org) pour obtenir de l'aide sur la création d'un bon repro. – Jeroen

Répondre

1

cela pourrait être vous aider. ne répond pas, mais il peut résoudre votre problème en ce qui concerne bombance vertical

Github

Questions connexes