Привет!
Версии:
owl.carousel.2.0.0-beta.2.4
jquery 2.2.4
У меня есть такая задача:
//Тут выводится карусель
<div id="car-photo-carousel" class="owl-carousel"></div>
//Выбираю машину
$('#car_id').on('change', function (e) {
var car_id = e.target.value;
//Инит карусели
var carousel = $('#car-photo-carousel');
carousel.owlCarousel({
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
items : 3,
responsiveClass:true,
nav:true,
navText: ["<i class=\"fa fa-chevron-left\" aria-hidden=\"true\"></i>","<i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>"],
responsive:{
0:{
items:1,
nav:true
},
400:{
items:2,
nav:true
},
768:{
items:3,
nav:true
}
}
});
//Тут делаю AJAX запрос, получаю список объектов
$.post('/admin/getmodels/car', {car_id: car_id}, function (car) {
if (car.photos.length > 0) {
var counter = 0;
//У объекта есть фотографии, они выводятся и добавляются через append к DIV, проверял все работает 100%, но мне надо добавить их к слайдеру, ок добавляем?
$.each(car.photos, function (index, photo) {
counter++;
var content = '<img class="img img-responsive" src="' + photo.file + '"/>';
carousel.data('owlCarousel').addItem(content,0);
});
} else {
//Или одна картинка без слайдера
carousel.append('<img class="cal-xs-8 img img-responsive" src="' + car.modelphoto[0].file + '"/>');
}
});
});
Тут получается что добавление происходит в другой функции и он не видит уже инициированного слайдера? Получаю ошибку: Uncaught TypeError: carousel.data(...).addItem is not a function
Как лучше сделать?