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などたくさん揃っているのでカスタマイズする際に活用したいですね。

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

Lightroomのユーザープリセット保存場所Lightroom(Mac版)でユーザープリセットのファイルの保存場所前のページ

面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」次のページAnimateScroll

関連記事

  1. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  3. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  4. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  5. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  6. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

コメント

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

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

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP