Owl Carouselで1枚ずつスライドするカルーセルの作り方【デモあり】

万能だと人気のOwl Carouselですが、実際複数の画像のスライドより、1枚ずつスライドするほうがよく使うんじゃないかと思います。

試しに1枚画像のスライダーを試してみました。

PCでご覧になっていてスマホで確認したい場合は、
右のスライドバーにある現在のページのQRコードを読み取って、
サンプルページのリンクへ移動できます。

サンプルページ

Owlカルーゼルは何がすごいの？

Owl Carousel(おうるかるーせる)は次のように軽量でいろいろ柔軟に対応しているから、
万能で人気と言われているようです。

1. レスポンシブ対応
2. スマートフォン向けタッチ＆フリック操作対応
3. PCのマウス操作も対応
4. 同一ページ内に複数のカルーセルの設置可能
5. JSON（軽めの言語らしいです）の使用
6. カスタマイズも簡単

公式サイトは英語でよくわからないので、
よく使いそうな最低限の設置方法をまとめました。

１、ファイルをダウンロード

まずはファイルをダウンロードし、展開します。

ダウンロード

「owl-carousel」フォルダにあるものを
そのままごっそり利用したいフォルダ内に移動してください。

２、必要なファイルをhead内で読み込む

必要なファイルをhead内で読み込みます。

	<link rel="stylesheet"href="owl-carousel/owl.carousel.css">
	<link rel="stylesheet"href="owl-carousel/owl.theme.css">

	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="owl-carousel/owl.carousel.min.js"></script>

jsフォルダ内のjquery-1.11.0.min.jsは、
すでに他のjqueryライブラリファイルを読み込んでいる場合は追記不要です。

「owl-carousel」フォルダ内のowl.carousel.min.jsは、
必ずjqueryライブラリファイルより後のほうに記述します。

３、HTMLを書く

必要な内容のHTMLを記述します。

<div id="owl-demo" class="owl-carousel owl-theme">

	<div class="item">

画像のフォルダのパスなどは作成しているものに合わせて変更してください。

４、CSSを追記する

スタイルを書きます。

#owl-demo .item img{
	display: block;
	width: 100%;
	height: auto;
}

５、javascriptプラグインをかく

設置したい内容に合わせて、javascriptのプラグインを記述します。

<script<
	$(document).ready(function() {
	
		$("#owl-demo").owlCarousel({
			navigation : true, // Show next and prev buttons
			slideSpeed : 300,//ページ送りした時のスライドスピード
			paginationSpeed : 800,//自動のスライドスピード
			singleItem:true,//アイテムを1つにする
			autoPlay: 5000,//自動でスライドするスピード。例：5000の場合、5秒
		});

	});
</script<

上記のHTMLとスタイルとプラグインの追記内容は1枚画像のスライダーの場合のものです。
他のパターンの「owl-carousel」を利用する場合は、
HTMLやCSSやjavascriptプラグインの記述内容が異なります。

他のカルーセルを使う時は、Owl Carousel公式ページをご確認ください。

ちなみに自分好みに改造したい場合は、
次のようなjavascriptプラグイン設定を行えばいいです。

items : 5,//並べる個数
    itemsCustom : false, //カスタム機能
    itemsDesktop : [1199,4],//デスクトップ大
    itemsDesktopSmall : [980,3],//デスクトップ小
    itemsTablet: [768,2],//タブレット大
    itemsTabletSmall: false,//タブレット小
    itemsMobile : [479,1],//スマホ
    singleItem : false,//アイテムをひとつにする
    itemsScaleUp : false,//アイテムを自動的に大きくする

    //Basic Speeds
    slideSpeed : 200,//スライドのスピード
    paginationSpeed : 800, //ページネーションの際のスピード
    rewindSpeed : 1000, //アイテムが最初に戻る時のスピード

    //Autoplay
    autoPlay : false, //自動プレイ
    stopOnHover : false,//ホバーでストップさせるか否か

    // Navigation
    navigation : false, //ナビゲーションの有無
    navigationText : ["prev","next"], //ナビゲーションのテキスト
    rewindNav : true, //最初に戻るの機能の有無
    scrollPerPage : false, //falseでスライドの動きを一個ずつ

    //Pagination
    pagination : true, //ページネーション
    paginationNumbers: false, //ページネーションにナンバー付与

    // Responsive 
    responsive: true, //レスポンシブ
    responsiveRefreshRate : 200, //ブラウザの幅が変化した際切り替わるスピード
    responsiveBaseWidth: window, //幅の基点の設定(デフォルトはウィンドウ幅)

    // CSS Styles
    baseClass : "owl-carousel", //classの名前の設定
    theme : "owl-theme", //テーマの設定

    //Lazy load
    lazyLoad : false, //
    lazyFollow : true, //
    lazyEffect : "fade", //

    //Auto height
    autoHeight : false, //高さを自動で設定

    //JSON 
    jsonPath : false, 
    jsonSuccess : false,

    //Mouse Events
    dragBeforeAnimFinish : true,
    mouseDrag : true,
    touchDrag : true,

    //Transitions
    transitionStyle : false,

    // Other
    addClassActive : false,

    //Callbacks
    beforeUpdate : false,
    afterUpdate : false,
    beforeInit: false, 
    afterInit: false, 
    beforeMove: false, 
    afterMove: false,
    afterAction: false,
    startDragging : false,
    afterLazyLoad : false