12

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

私がやろうとしているのは、次の前をクリックしたときに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

});

どんな助けでも大歓迎です。

前もって感謝します。

4

8 に答える 8

28

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

//Initialize Plugin
$(".owl-carousel").owlCarousel(
  {
    slideBy: 4
  }
);
于 2015-09-08T05:21:38.277 に答える
17 
scrollPerPage : true

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

于 2014-08-06T17:18:04.060 に答える
8 
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
});

これは私を助けました。

于 2015-02-12T07:32:38.437 に答える
4

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 項目分移動するはずです。

于 2014-02-21T23:59:54.453 に答える
3 
Slide 2 items in OWL Carousel

Check this Example

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

于 2016-10-10T12:43:25.807 に答える
2

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

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;

これが助けになることを願っています。

于 2015-12-16T17:17:28.277 に答える
1

For Next button,

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

For Previous button,

//base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;
于 2014-03-24T10:24:34.257 に答える