Owlcarousel2: Issue with bootstrap tabs

[alanpilloud]

First of all, thanks a lot for your great carousel, which is the best by far !

Here is my issue : I made 4 carousels included in 4 bootstrap tabs.
Everything used to work fine with the owl js 2.0.0-beta.2.1.

However, with the owl js 2.0.0-beta.2.4, the first carousel is well displayed, but then, switching between tabs, the width of the items is not ok.

See attached image.

Thanks again

[witrin]

We will need a JSFiddle for that fork from this please: http://jsfiddle.net/u3FTZ/.

[alanpilloud]

Here you are : http://jsfiddle.net/JWFLH/3/
By the way, I only tested it on FF 30.0 and Opera 22.0, both have the same problem.

Thanks a lot !

[witrin]

Thanks a lot! This is related to #147. I'll fix that soon.

[ocvninfo]

same problem. hope will fixed in next version

[witrin]

Here is the thing about this issue. There are in general three methods involved here:

• invalidate - Invalidates some part of the carousel
• update - Works when something was invalidated before
• refresh - Just calls update but adds/removes also some classes to the element during the update

What's the problem with the issue here? When the carousel is initialized in a hidden container, there seems to be no way to get its real dimensions (please let me know when you know better).

So what has to be done when a hidden carousel gets visible? Right, we need to invalidate its width (by calling owlCarousel('invalidate', 'width')) and make an update (by calling owlCarousel('update')).

You might think: "I don't care it has worked before!". Well and how have we done it before? We have used an interval for every carousel that checks always its visibility within every 500 ms (see watchVisibility) and call invalidate and update when something has changed.

The reasons for this approach are that it helps "lazy people" like Bartosz it has called and it seems the only cross browser way to get the information when the dimensions of an element has changed automatically (please let me know when you know better).

This approach comes with a poor performance and a small effort. So my wish would be to put this feature in a plugin like autorefresh to give other people the possibility to make this refresh manually. In the particular case of bootstrap tabs it would be done like this: http://jsfiddle.net/JWFLH/8/. As you can see this is not very hard to implement ;).

So if you all okay with this I would create this little plugin autorefresh and you have just to choose which way you want to take by using ether the plugin or do it manually. See also #147 at its end.

[witrin]

@alanpilloud @ocvninfo Is this what you want?

[ocvninfo]

thanks @witrin . But this issue still not work when resize browser

[witrin]

@ocvninfo I've tested both variants (auto and manual) both working including resize:

• http://jsfiddle.net/JWFLH/8/ (manual)
• http://jsfiddle.net/JWFLH/12/ (auto)

Tested on Chrome Ubuntu. Sometimes the files are not loaded over rawgit.com so you have to reload until they are.

[ocvninfo]

OK. auto refesh work done with js file https://rawgit.com/witrin/OwlCarousel2/%23239/src/js/owl.carousel.js
But dont work with js file http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js
thanks @witrin .

[witrin]

@ocvninfo You should know that we are here in development. So the last address you mentioned will be manually updated by Bartosz when a new milestone has reached. Until then you have to use the develop branch. But even this won't reflect my changes before the coming pull request is merged.

[ocvninfo]

navigation not working http://jsfiddle.net/JWFLH/26/.
nav is only working in first tab

[witrin]

@ocvninfo Sorry I've used update instead of refresh by mistake: http://jsfiddle.net/JWFLH/39/ (manual). I'll fix the pull request respectively the autorefresh plugin soon.

[ocvninfo]

thanks @witrin very much for your work. hope it soon

[witrin]

http://jsfiddle.net/JWFLH/26/ works now.

[alanpilloud]

Everything works fine !
I'll just wait for the next release now :)
Thanks a lot for your work !

[ktsixit]

Could somebody explain what's needed to be done to fix this issue? The carousel in the jsfiddle that's supposed to be the solution, is not working for me. The carousel is hidden.

I tried adding
.owlCarousel('invalidate', 'width').owlCarousel('update');
or
.owlCarousel('invalidate', 'width').owlCarousel('refresh');
manually, when tab is clicked, but still carousel is not working properly

Please take a look of this jsfiddle: https://jsfiddle.net/ktsixit/JWFLH/88/

[amirhsh]

@alanpilloud Hi
I have same problem in bootstrap tabs. Did you finally solve that problem?
Thanks in advance

[amirhsh]

@witrin @ocvninfo @dennisreimann
Hi guys.
I have same problem but I couldn't find out what exactly your solution is.
Can you help me ?

[amirhsh]

@witrin @ocvninfo @dennisreimann @alanpilloud
Good news !
I found the solution:

initialize_owl($('#owl1'));

$('a[href="#book"]').on('shown.bs.tab', function () {
    initialize_owl($('#owl1'));
}).on('hide.bs.tab', function () {
    destroy_owl($('#owl1'));
});

$('a[href="#package"]').on('shown.bs.tab', function () {
    initialize_owl($('#owl2'));
}).on('hide.bs.tab', function () {
    destroy_owl($('#owl2'));
});

$('a[href="#sound"]').on('shown.bs.tab', function () {
    initialize_owl($('#owl3'));
}).on('hide.bs.tab', function () {
    destroy_owl($('#owl3'));
});

function initialize_owl(el) {


    el.owlCarousel({
        loop:true,
        margin:10,
        rtl:true,
        nav:false,
        dots:false,
        lazyLoad:true,
        responsive:{
            0:{
                items:2
            },
            480:{
                items:3
            },
            767:{
                items:4,
                margin:30
            }

        }
    });
}

function destroy_owl(el) {
    el.trigger("destroy.owl.carousel");
    el.find('.owl-stage-outer').children(':eq(0)').unwrap();
}

[AlexVrk]

amirhsh thanks! Your solution works

[arassea17]

thanks @witrin very much for your work.

[toir427]

https://www.youtube.com/watch?v=tKrt9ev4S24