Как повторно отобрать элемент совы-карусели?

Ну, теперь я использую плагин owl-carousel-2.

И я столкнулся со следующей проблемой:

Код разметки:

<div class="owl-carousel" style="display: none;">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <!-- ... -->
    <div class="item"><img src="..." /></div>
</div>

<script>
$(function() {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel();

    // Doing many things here.

    $owl.show();
});
</script>

Проблема заключается в следующем:

Когда я инициализирую оператор $owl.owlCarousel();, который под скрытым состоянием, его размер не инициализируется.

Поэтому, когда я показываю этот элемент управления, элемент управления отображается в беспорядке!

Но когда я изменяю размер окна, он, казалось, запускает повторную визуализацию. Элемент управления отображает содержимое, затем отображается хорошо.

Так что мне интересно, есть ли способ вызвать этот метод повторного рендеринга (или обновления).

Чтобы убедиться, что элемент управления не будет отображаться в беспорядке.

Я попытался прочитать документы и источники, но еще не получил хорошего решения.

Пожалуйста, помогите.

Ответ 1

Я обнаружил уродливое грязное решение. Во всяком случае, это сработало:

Основная процедура:

Уничтожьте эту сову-карусель.
Вручную измените разметку на начальное состояние.
Инициализировать сова-карусель.

var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory, the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here, again.
});

Это сработало, но таким грязным способом. В надежде увидеть лучшее, опрятное решение.

Ответ 2

Это работает для меня:

// get owl element
var owl = $('.owl-carousel');

// get owl instance from element
var owlInstance = owl.data('owlCarousel');

// if instance is existing
if(owlInstance != null)
    owlInstance.reinit();

Дополнительная информация: http://owlgraphic.com/owlcarousel/demos/manipulations.html

Ответ 3

Перейдите в ту же проблему с OP. Мне удается заставить его работать, сначала удалив класс owl-loaded. Затем при рендеринге запускается событие обновления после повторного добавления класса.

// Remove the owl-loaded class after initialisation 
$owl.owlCarousel().removeClass('owl-loaded');

// Show the carousel and trigger refresh
$owl.show(function(), {
  $(this).addClass('owl-loaded').trigger('refresh.owl.carousel');
})

Ответ 4

Это мое решение, основанное на умном обходном пути fish_ball:

if($('.owl-carousel').hasClass('owl-theme')){ //resize event was triggering an error, this if statement is to go around it

            $('.owl-carousel').trigger('destroy.owl.carousel'); //these 3 lines kill the owl, and returns the markup to the initial state
            $('.owl-carousel').find('.owl-stage-outer').children().unwrap();
            $('.owl-carousel').removeClass("owl-center owl-loaded owl-text-select-on");

            $(".owl-carousel").owlCarousel(); //re-initialise the owl
        }

Ответ 5

Что касается 2.0.0-beta.2.4, это работает для меня:

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}

Ответ 6

С Owl Carousel 2 вы повторно инициализируетесь так:

jQuery('.owl-carousel').trigger('refresh.owl.carousel');

см. эту проблему.

Ответ 7

Читали ли вы документацию используемого вами плагина, потому что у карусели совы есть метод обновления, когда вы хотите обновить карусель.

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

Документы ~~здесь~~ для событий