web-dev-qa-db-ja.com

フクロウカルーセルを垂直に使用する方法は？

私はプラグインのコードを受け取りたくなかったので、誰かがすでにプラグインを垂直に使用したかどうか疑問に思っていました。このプラグインが水平に使用できるのは残念です。言葉遣いでごめんなさい...

javascriptjquerycss3owl-carousel
9
user3822650

これを解決するCodePenは次のとおりです。

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

2.0ベータに関しては、現在、垂直にスライドすることはできません。ただし、リファクタリングとプラグインアーキテクチャにより複雑さが大幅に削減され、より多くの機能を追加できるようになりました。これ includes 特に、さまざまなアニメーション効果を個別のアニメーションプロバイダーに分解できるAPI。したがって、垂直スライドは確かに可能です。ただし、この機能は野心的であり、解決すべき問題がいくつかあります。現在の ロードマップ です。

3
witrin

次のように、カルーセルを回転してからアイテムを回転させることができます。

<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
     });
});

これをcodepenで確認してください： https://codepen.io/marcogu00/pen/eLeWMq

ドラッグは適切に機能しないため、無効にする必要があることに注意してください

2
Marco Gutierrez