Как заставить работать OWL CAROUSEL в табах?

Question

[Dextersis]

Здравствуйте, подскажите пожалуйста, как заставить работать OWL CAROUSEL в табах?
К примеру имеем 3 вкладки, в первой вкладки, слайдер работает должным образом, но как только перехожу на вторую или третью вкладку, то слайдер отображается некорректно, все сбивается в кучу, как я понял это из-за того что остальные табы скрыты. Как это исправить? Заранее спасибо

Answer 1

[Фаёзжон Бердиев]

Вешайте на ивент переключения таба активацию\инициализацию OWL-carousel.

Comments

[Dextersis]

А подробнее пожалуйста можно? Спасибо

[Фаёзжон Бердиев]

У Вас табы от bootstrap?

[Дмитрий Кравченко]

когда owl инициализируется в скрытом контейнере (невидимом табе), он неправильно считает размеры, потому что width и height невидимого элемента равны нулю. Соответственно, задача либо инициализировать карусель во время перехода на таб, либо обновлять ее в этот момент

[Dextersis]

Фаёзжон Бердиев: Нет, вот эти codepen.io/Lewitje/pen/doJRBX

[Фаёзжон Бердиев]

Намного проще, посмотрите код переключения таба, где написанно on click "active".. Туда добавьте медот из owl.refresh

jsfiddle.net/m8WaT

[Фаёзжон Бердиев]

jsfiddle.net/m8WaT/2 эта ссылка пожалуйста

[Dextersis]

Фаёзжон Бердиев: Большое человеческое спасибо

[Фаёзжон Бердиев]

Dextersis: Очень рад что помог, коллега. Не за что

[ligisayan]

Фаёзжон Бердиев а я вот тут добавил код, но не помогло..
jsfiddle.net/Epmwx/278

[Фаёзжон Бердиев]

ligisayan: Пока не понятно что не помогло, ведь OWL карусель прекрасно инициализируется и работает.

[ligisayan]

Фаёзжон Бердиев: вот так заработало - jsfiddle.net/Epmwx/283

[Фаёзжон Бердиев]

ligisayan: Возможно Вам пора познакомится с promise() https://api.jquery.com/promise/

[ligisayan]

Фаёзжон Бердиев: спасибо, гляну