PAGE TOP

スマートフォンサイト用フリックスライダーの決定版!Owl Carousel

← →マウスでグラブしてスライドできます。スマートフォンではフリックでスライドします。

スマートフォンでフリック可能なスライダーを実装するとなるとスライド部分の縦方向のフリックが効かなかったり、androidでバグがあったり、なかなかこれ!と思うものが無かったのですが、現在安定して使えているスライダーをご紹介します。

 

スタンダードな1枚もののスライドやLazy Loadなど様々なタイプのカルーセルを使い分けることができ、オートプレイやページネーション、ナビなど多数のオプションでお好みに設定できます。 レスポンシブウェブデザインにも対応しているので、様々な端末での表示にこれひとつで対応可能なところもポイントです。

 

しかも本体はわずか15KBと動作も軽快で、Androidでも問題なく動作しています。
それでは、実装方法です。
以下はこのページで表示させている1枚ものの画像をフリックスライドさせる場合の必須コードです。

 

ダウンロード

OWL Carousel │ http://www.owlgraphic.com/

上記よりダウンロードしたファイルの

<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
<script src="js/owl.carousel.min.js"></script>

をヘッダに読み込み、スライダーを表示させたい場所に下記のマークアップ。

<div id="owl" class="owl-carousel">
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
</div>

CSSはこれだけ

#owl .item img {
display: block;
margin:0 auto;
}

そして、プラグインを呼び出し。(オプション指定済み)

$(function(){
$(document).ready(function() {
 $("#owl").owlCarousel({
	navigation : false,
	slideSpeed : 300,
	paginationSpeed : 400,
	pagenation:true,
	singleItem:true,
	autoPlay:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
  });
});

以上。簡単ですね。

 

オプション

あとは様々なオプションをプラグイン呼び出し項目に記述します。
たくさんありますが、よく使うものを。

 

pagenation : スライダー下部にセンタリングされた○のページネーション
autoplay : 自動でスライドします。
stopOnHover : PCでマウスを置いた時自動スライドがストップします。
slidespeed : フリックや自動でのスライド速度を決定 ミリセカンド
navigation : prev nextのボタンが現れます。
navigationText : 上記prev nextをの文字を変更できます。(HTML使用可)

 

その他詳しくはオフィシャルでもご確認ください。

OWL Carousel │ http://www.owlgraphic.com/

同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •