Как повторно инициализировать Сову Карусель после ajax-вызова

Я пытаюсь повторно инициализировать карусель совы после успешного вызова ajax. Вызов ajax изменит данные, но представление останется таким же. У меня проблема, когда представление (структура карусели) не будет повторно инициализироваться. Все в порядке при загрузке страницы.

im с использованием версии 1.3.3

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax call

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

Мне не хватает чего-то, что мне нужно сделать. Я просмотрел эту проблему на странице github и пробовал предложения, но безрезультатно.

Любая помощь оценена

Изменить

из приведенного совета я создал эти две функции

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

Кажется, что работает, но интересно, правильно ли это сделать?

Ответы

Ответ 1

Приведен пример ниже.

Инициализация карусели:

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

И когда вы используете обратный вызов ajax, попробуйте:

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

Я создаю скрипку, чтобы объяснить вам, как повторно инициализировать карусель: http://jsfiddle.net/s10bgckL/959/

PS: Я не создал массив параметров, только если вы хотите изменить некоторые параметры как скорость, количество отображаемых элементов и т.д.

Я надеюсь, что это помогает.

Ответ 2

Это должно помочь:

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})

Ответ 3

Попробуйте $(window).load() вместо reinitialize

Ответ 4

Попробуйте, его существует в совой документации:

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)

Ответ 5

Я проделал ту же проблему и попробовал метод reinit() но он не работал для меня, поэтому я попытался уничтожить и снова инициализировать, и это сработало.

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});

Ответ 6

$('#owl-demo').data('owlCarousel').reinit();