オススメ スライダー Owl Carousel 2の使い方

スライダーのプラグインも色々とありますが、私がオススメなのはOwl Carouselです。
動画のスライドや、レスポンシブルにやってくれたり、モバイルのタッチ&ドラッグにも対応しているので、PC、モバイル共通のコードでいく人には、最高にオススメのスライダーです。
以下に簡単に使い方を説明します。

執筆時点のバージョンは、2.0.0-beta.2.4です

基本的な使い方

js

$( document ).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop:true, // 無限ループ
        margin:10, // margin-right 単位はpx
        nav:true, //  next/prevボタンの表示・非表示
        responsive:{ //　画面サイズによるスライドの表示数
            0:{
                items:1 // 0~600pxの間は、1個表示
            },
            600:{
                items:3 // 600~1000pxの間は、3個表示
            },
            1000:{
                items:5 // 1000px~の間は、5個表示
            }
        }
    });
});

html

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
</div>
owl-carouselの子要素($(".item"))がスライドの対象となる。

Lazy Load

後ろにあって、まだ表示されていない画像を表示される直前に読み込むことができるため、初期表示での描画負荷が軽くすることができる。
js

$( document ).ready(function() {
    $('.owl-carousel').owlCarousel({
        items:4,
        lazyLoad:true,
        loop:true,
        margin:10
    });
});

html

<div class="owl-carousel">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
</div>

ポイントは以下の2点。

1. lazyLoad:trueをtrue
2. data-srcに画像のパスを指定する。

これで、画像を遅延して読み込んでくれます。

参考ページ

最新バージョン

公式ページ
デモページ
ドキュメント

旧バージョン(安定)

旧公式ページ