Owl Carousel

JavaScript

タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carousel」

素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹介します。タッチ操作やレスポンシブにも対応している「Owl Carousel」です。スマホやタブレットに最適化されるのでカルーセルを取り入れたい時の選択肢の一つとして覚えておきたいですね。以下、使い方です。

[ads_center]

使い方

Owl Carousel

実際のデモはこんな感じです。スマホやタブレットからはタッチ操作で切り替えることができます。パソコンからはドラッグすることでカルーセルを切り替えることができます。下部にはナビゲーションも配置されているので一気に移動したい場合にはここからが便利ですね。

使い方も簡単です。jQuery本体とプラグインを読み込みます。

<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="jquery-1.9.1.min.js"></script>
<script src="assets/owl-carousel/owl.carousel.js"></script>

HTMLのマークアップもシンプルです。カルーセルの各要素をowl-carouselというクラス名を付与したdivで内包します。

<div id="owl-example" class="owl-carousel">
    <div>コンテンツ</div>
    <div>コンテンツ</div>
    <div>コンテンツ</div>
    <!-- 中略 -->
</div>

あとはプラグインを呼び出すだけです。

$(document).ready(function() {
    $("#owl-example").owlCarousel();
});

オプションもslideSpeedやautoPlayなどたくさん揃っているのでカスタマイズする際に活用したいですね。

ダウンロードや詳細は以下からどうぞ。

関連記事

  1. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  2. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  3. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  4. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  5. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  6. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP