web-dev-qa-db-ja.com

OWLカルーセルのスライド2アイテム

スライダーに OWLカルーセル を使用しています。

私がやろうとしているのは、次の前がクリックされたときにスライド2のアイテムです。

そのため、2番目のアイテムごとにスライドすると、送信中も2番目のアイテムが表示されます。

私はCSSでそれを解決しようとしましたが、成功しませんでした。

これが私の基本設定です

$("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  slideSpeed : 600,
  paginationSpeed : 400,
  singleItem:true,

  // "singleItem:true" is a shortcut for:
  // items : 2 
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

}）;

助けていただければ幸いです。

前もって感謝します。

javascriptjquerycsscarouselowl-carousel
11
Dom

Owl Carousel（1.3.2）の現在のバージョンで、「owl.carousel.js」ファイルを見つけ、＃558行までスクロールします。行は次のようになります。

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

最後の番号を「2」に変更して、次のようにします。

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

ファイルを保存すると、スライダーが2項目移動します。

4
NinoLopezWeb

プラグインのコードを変更しないでください。以下で説明するように、スライドバイオプションでカルーセルを初期化する必要があります。

//Initialize Plugin
$(".owl-carousel").owlCarousel(
  {
    slideBy: 4
  }
);
26
Risheekesh Yadav
scrollPerPage : true

これは役立つかもしれません

17
Andrii Motsyk
jQuery(".view-id-frontpage .view-content").owlCarousel( {
  items: 2,
  itemsDesktop : [1000,2], // 2 items between 1000px and 901px
  itemsDesktopSmall : [900,2], // betweem 900px and 601px
  itemsTablet: [700,1], // 2 items between 600 and 480
  itemsMobile : [479,1] , // 1 item between 479 and 0
  navigation: true,
  lazyLoad: true,
  pagination: false,
  scrollPerPage : true
});

これは私を助けました。

8
Valentina
Slide 2 items in OWL Carousel

Check this Example

http://jsfiddle.net/k0nn7yw5/107/

3
Rizwan Akram

上記の回答は役に立ちますが、不完全です。

owl.carousel.jsの558行目を置き換えます：

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

owl.carousel.jsの559行目を次のように置き換えます。

if (base.currentItem > base.maximumItem + (base.options.scrollPerPage === true ? (base.options.items - 1) : 0)) {

これにより、[次へ]をクリックしたときにカルーセルが2スク​​ロールされますが、ユーザーが[前]ボタンをクリックしたときに、それを考慮する必要があります。以下はまさにそれを行います

owl.carousel.jsの581行目を次のように置き換えます。

base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;

ここで、カルーセル内の奇数のアイテムを考慮する必要があるため、すべてのアイテムを最後までクリックします。

前のステップのコードのすぐ下の行582にこのコードを追加します。

if (base.currentItem === -1) base.currentItem = 0;

これが役立つことを願っています。

2
Ben Callis

簡単に追加できます

slideBy: 2

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

2
Chami M

[次へ]ボタンの場合、

//base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

[前へ]ボタンの場合、

//base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;
1
Kiran