WebDesign Dackel

OwlCarousel2を試してみる

OwlCarousel2を試してみる

Hatena0
Google+0
Pocket0
Feedly0

レスポンシブなサイトを作る時によくお世話になっているOwlCarouselに新しいバージョンが出たので早速触ってみました。

Owl Carousel 2

まだベータ版らしいのですが新しい機能が幾つか追加されていて、更に使い勝手がよくなったみたいです。
追加された機能は以下のようです。

  • Infinity Loop
  • Center item
  • Smart Speed
  • Stage Padding
  • Item Margin
  • Ability to make almost all options responsive
  • Various Widths
  • Callback Events
  • RTL
  • YouTube/Vimeo support (fetching thumbnails as well)
  • Anchors navigation
  • Merged Items
  • and more…

今回サンプルは作っていませんが、YoutubeやVimeoのサポート、URLハッシュによるナビゲーションにも対応しているみたいです。

試してみる

新しい機能を早速試してみたかったので、簡単なサンプルを作ってみました。

サンプル

Loop

通常のカルーセル。左右の移動が無限に続きます。また、marginオプションの指定でそれぞれのアイテム間の余白が調整できる様になっています。

Loop Sample

$("#owl01").owlCarousel({
    loop: true,
    margin: 5,
    responsive: {
        0:{
        items:1
    },
    700:{
        items:3
    }
    }
});

Center

アイテムのスタート位置を中央へ寄せることが出来ます。サンプルでは「1」が中央へ来ているのが分かるかと思います。

Center Sample

$("#owl02").owlCarousel({
    center: true,
    loop: true,
    margin: 5,
    responsive: {
        0:{
        items:1
    },
    700:{
        items:3
    }
    }
});

Stage Padding

指定したピクセル分、左右に余白を作ることが出来ます。サンプルでは20pxを指定しています。

Stage Padding Sample

$("#owl03").owlCarousel({
    stagePadding: 20,
    loop: true,
    margin: 5,
    responsive: {
        0:{
        items:1
    },
    700:{
        items:3
    }
    }
});

Auto Width

各アイテムがバラバラのサイズでも、OwlCarouselが良い感じに調整をしてくれます。

Auto Width Sample

$("#owl04").owlCarousel({
    autoWidth: true,
    loop: true,
    margin: 5,
    responsive: {
        0:{
        items:1
    },
    700:{
        items:3
    }
    }
});

Single Item

新しい機能ではありませんが、シンプルなスライドショーのサンプルです。
itemsオプションに1を指定して、一枚ずつスライドさせます。

Single Item Sample

$("#owl05").owlCarousel({
    items: 1,
    loop:true
});

対応ブラウザ

公式でアナウンスされている対応ブラウザは以下のとおりで、相変わらずの幅広い対応です。

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

まとめ

冒頭に書いた通り、前のバージョンに比べて使い勝手がよくなり、より柔軟にデザインを調整出来る様になっていると思います。正式なバージョンがリリースされたらガシガシ使っていきたいと思いました。