スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Owl Carousel 2 - Current Item

Playing with Owl Carousel 2.
It is pretty nice plug-in, but I couldn't figure out how to get current item.
Current item, I mean is the front center item, other word the item currently shown to user.

Actually it was pretty easy to implement using the version 1 of Owl Carousel, however, I had really long time to google on that, and I couldn't get any good solutions.
The official document says we can use "info" option, but it seems the option is not implemented yet.

Some says that I can get current item with detecting "active" class, like this.

var active = $("#owl").find(".owl-item.active");
console.log(active.index());



It works partly, but sometimes confused with numbers.

Finally, I decided to edit the pulgin itself.
Do like this.


Navigation.prototype.draw = function() {
.
.
.
this._controls.$indicators.find('.active').removeClass('active');
this._controls.$indicators.children().eq($.inArray(this.current(), this._pages)).addClass('active');
currentItemNum = $.inArray(this.current(), this._pages);



Do not forget define currentItemNum on the top of the code like

var currentItemNum;
;(function($, window, document, undefined) {

var drag, state, e;



That's it.
Now you can refer to curentItemNum from your code, it shows the current item.


コメント

コメントの投稿

非公開コメント

PR

PR

プロフィール

何でも書くman

Author:何でも書くman
思ったことや備忘録など、とりあえずなんでも書きます。IT系のことや趣味、生活に関わることなども。

ページの先頭へ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。