web-dev-qa-db-fra.com

Comment utiliser le carrousel de hibou verticalement?

Je ne voulais pas prendre le code du plugin donc je me demandais si quelqu'un avait déjà réussi à utiliser le plugin verticalement. C'est dommage de la part de ce plugin qui peut être utilisé horizontalement. Désolé pour le langage ...

javascriptjquerycss3owl-carousel
9
user3822650

Voici un CodePen qui résout ce problème:

http://codepen.io/dapinitial/pen/xZaRqz

$(".owl-carousel").owlCarousel({
  loop: true,
  autoplay: true,
  items: 1,
  nav: true,
  autoplayHoverPause: true,
  animateOut: 'slideOutUp',
  animateIn: 'slideInUp'
});
5
dapinitial

En ce qui concerne la version bêta 2.0, il n'est actuellement pas possible de glisser verticalement. Cependant, la complexité a été considérablement réduite par le refactoring et l'architecture du plugin pour faire de la place pour plus de fonctionnalités. Cela inclut en particulier une API avec laquelle les différents effets d'animation peuvent être décomposés en fournisseurs d'animation distincts. Ainsi, un glissement vertical serait certainement possible. Cependant, la fonctionnalité est ambitieuse et il y a des problèmes à résoudre. Voici l'actuel feuille de route .

3
witrin

Vous pouvez faire pivoter le carrousel, puis faire pivoter les éléments vers l'arrière, comme ceci:

<div class="owl-carousel owl-theme">
  <img class="item" src="http://placehold.it/320x240?text=Slide%200">
  <img class="item" src="http://placehold.it/320x240?text=Slide%201">
  <img class="item" src="http://placehold.it/320x240?text=Slide%202">
  <img class="item" src="http://placehold.it/320x240?text=Slide%203">
  <img class="item" src="http://placehold.it/320x240?text=Slide%204">
  <img class="item" src="http://placehold.it/320x240?text=Slide%205">
  <img class="item" src="http://placehold.it/320x240?text=Slide%206">
  <img class="item" src="http://placehold.it/320x240?text=Slide%207">
</div>

//CSS ______________

.owl-carousel{
   transform: rotate(90deg);
   width: 270px; 
   margin-top:100px;
 } 
.item{
   transform: rotate(-90deg);
 }
.owl-carousel .owl-nav{
   display: flex;
   justify-content: space-between;
   position: absolute;
   width: 100%;
   top: calc(50% - 33px);
 }
div.owl-carousel .owl-nav .owl-prev, div.owl-carousel .owl-nav .owl-next{
    font-size:36px;
    top:unset;
    bottom: 15px; 
}



/* JS ____________*/
$( document ).ready(function() {
    $(".owl-carousel").owlCarousel({
         items: 3,
         loop: false,
         mouseDrag: false,
         touchDrag: false,
         pullDrag: false,
         rewind: true,
         autoplay: true,
         margin: 0,
         nav: true
     });
});

Vérifiez cela un codepen: https://codepen.io/marcogu00/pen/eLeWMq

Notez que la traînée doit être désactivée car elle ne fonctionnera pas correctement

2
Marco Gutierrez