当社のカルーセルは、画像スライダー、アイテムカルーセル、オンボーディングエクスペリエンスなど、堅牢で多用途なコンポーネントです。タッチ対応なので、特にモバイルでの操作がスムーズです。

注：タッチにも対応しています！指でスワイプしてカルーセルをスクロールしてみてください。

  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
      

初期化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.carousel').carousel();
  });
      

オプション

名前	タイプ	デフォルト	説明
duration (期間)	数値	200	ミリ秒単位のトランジション期間。
dist	数値	-100	パースペクティブズーム。0の場合、すべてのアイテムのサイズは同じです。
shift	数値	0	中央のアイテムの間隔を設定します。
padding (パディング)	数値	0	中央以外のアイテム間のpaddingを設定します。
numVisible	数値	5	表示するアイテム数を設定します。
fullWidth	ブール値	false	カルーセルを2番目の例のような全幅のスライダーにします。
indicators (インジケーター)	ブール値	false	インジケーターを表示するにはtrueに設定します。
noWrap	ブール値	false	アイテムをラップせず、循環させません。
onCycleTo	関数	null	新しいスライドに切り替わったときのコールバック。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。

  var instance = M.Carousel.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.carousel').carousel('methodName');
    $('.carousel').carousel('methodName', paramName);
  */
        

.next();

カルーセルを次のスライドに移動するか、指定された数のスライドだけ進めます。

引数

整数（省略可能）：カルーセルがスライドする回数。

instance.next();
instance.next(3); // Move next n times.
      

.prev();

カルーセルを前のスライドに移動するか、指定された数のスライドだけ戻ります。

引数

整数（省略可能）：カルーセルがスライドする回数。

instance.prev();
instance.prev(3); // Move previous n times.
      

.set();

カルーセルをn番目のスライドに移動します。

引数

整数：スライドのインデックス。

instance.set();
instance.set(3); // Set to nth slide.
      

.destroy();

プラグインインスタンスを破棄し、解除します。

instance.destroy();
      

プロパティ

名前	タイプ	説明
el	要素	プラグインが初期化されたDOM要素。
options	オブジェクト	インスタンスが初期化されたオプション。
pressed	ブール値	カルーセルをクリックまたはタップしているかどうか。
dragged	ブール値	カルーセルが現在ドラッグされているかどうか。
center	数値	中央のカルーセルアイテムのインデックス。

全幅スライダー

当社のカルーセルには、シンプルでエレガントな画像カルーセルにする全幅オプションがあります。また、スライダーの下部に表示されるインジケーターも使用できます。

注：タッチにも対応しています！指でスワイプしてカルーセルをスクロールしてみてください。

  <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
  </div>
        

  var instance = M.Carousel.init({
    fullWidth: true
  });

  // Or with jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true
  });
        

特別なオプション

カルーセルは画像だけでなく、コンテンツカルーセルを作成することもできます。 carousel-fixed-item クラスのdivを追加し、そこに固定コンテンツを追加することで、カルーセルに固定アイテムを追加できます。

注：タッチにも対応しています！指でスワイプしてカルーセルをスクロールしてみてください。

  <div class="carousel carousel-slider center">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
        

  var instance = M.Carousel.init({
    fullWidth: true,
    indicators: true
  });

  // Or with jQuery

  $('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: true
  });