OWL Carouselをカスタムしてナンバリング表示にする。

8月 29th, 2014

超軽量でレスポンシブ対応、フリックにも対応してる「OWL Carousel」スゲー重宝しています。

様々なオプションがあってカスタム性も高いんですがスライドショーとして使うときに【現在/総数】って表示がデフォルトでは出来ません。
これを実装しましたので記録と共有(※そこまで大した物じゃないです)

owl.carousel.jsのソースを見ていくと85行目に【base.itemsAmount】といかにも総数っぽい変数がw
早速 、その直下にalert(base.itemsAmount);を記述して数値を確認。
見事ビンゴ!!!!!

これで、総数の変数はわかりました。

次に 表示している画像(要素)が何番目なのかというのを表しているところを探るわけですが、
OWL Carouselにはページネーションのオプションが二種類用意されています。
・ pagination
・paginationNumbers
の二つです。

前者は「●」を要素分並べてアクティブのところを色替え、後者は基本同じですが●の代わりに数字が入っています。

この数字がまさにそうなので paginationNumbersをtrueにして実行、ナンバーが表示されているソースを確認します。
すると<div class=”owl-pagination”>~</div>で囲まれたところがそこにあたることが判明します。

その中にはowl-pageというクラスが存在し、動きを確認していくと現在表示されているところはactiveのクラスが追加されて色が変わっているという事がわかります。

そこでowl-pageクラスをdisplay:none;、activeクラスをdisplay:inline;にしてみるとどうでしょう、現在表示されている番号のみ表示することが出来ました!

あとは【/総数】を番号の後にいれてあげれば完成です。
owl.carousel.jsのソースにもどりowl-paginationを検索します。
ずっと見ていくと439行目あたりにbuildPaginationといかにもなファンクション、すぐあとにowl-paginationが出てきます。

そのあたりから見ていくとちょっと後にfor分でループ処理をしている箇所(471行目あたり)にぶつかります。
そこを見ていくと、 “class” : “owl-page”、<span></span>とか近づいてきた感のする文字列が見えるはずです。

その後に”text”: base.options.paginationNumbers・・・・と言うところ(483行目あたり)、もうここに間違いありませんw
counterという変数が数値をカウントしているのは明らかで、

“text”: base.options.paginationNumbers === true ? counter :””,
↓を
“text”: base.options.paginationNumbers === true ? (counter + “/総数”) : “”,

に変更して実行してみると・・・

見事【現在/総数】が表示されました!!!!!!

これ、総数は直打ちなのでせっかくだから総数も引っ張って来ましょう。

“text”: base.options.paginationNumbers === true ? (counter + “/総数”) : “”,

“text”: base.options.paginationNumbers === true ? (counter + “/” + base.itemsAmount) : “”,

これで実行してみると総数は直打ちと同じ数字が出ます、つまりこれが正解!

ざっく説明したのでCSSの形成とか省いていますが、基本これで【現在/総数】の表示が出来るはずです。

[`evernote` not found]
このエントリーをはてなブックマークに追加

カテゴリー: web

タグ: Leave a comment

Leave a comment

Feed

http://www.browncrown.net/blog / OWL Carouselをカスタムしてナンバリング表示にする。