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. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  2. Filterable Product Grid
  3. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  4. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  5. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  6. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP