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. Slight Submenu
  2. jQuery Notebook
  3. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  4. How satisfied are you? Slider
  5. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  6. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

コメント

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

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

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP