Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Owl-carousel 2 добавление слайдов через each (https://javascript.ru/forum/jquery/64974-owl-carousel-2-dobavlenie-slajjdov-cherez-each.html)

AnimalInstinct 17.09.2016 11:33

Owl-carousel 2 добавление слайдов через each
 
Привет!
Версии:
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

Как лучше сделать? :victory:

рони 17.09.2016 12:07

AnimalInstinct,
строку 5 перенесите в строку 1.
или в строках 37 , 41 укажите селектор а не используйте переменную

AnimalInstinct 17.09.2016 12:31

Сделал так, но пока получаю ту же ошибку Uncaught TypeError: $(...).data(...).addItem is not a function

$( document ).ready(function() {
            $('#car-photo-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
                    }
                }
            });
        });
        
        $('#car_id').on('change', function (e) {
            var car_id = e.target.value;
            $.post('/admin/getmodels/car', {car_id: car_id}, function (car) {

                if (car.photos.length > 0) {
                    var counter = 0;
                    $.each(car.photos, function (index, photo) {
                        counter++;
                        var content = '<img class="img img-responsive" src="' + photo.file + '"/>';
                        $('#car-photo-carousel').data('owlCarousel').addItem(content,0);
                    });
                } else {
                    $('#car-photo-carousel').append('<img class="cal-xs-8 img img-responsive" src="' + car.modelphoto[0].file + '"/>');
                }
            });
        });

рони 17.09.2016 15:07

AnimalInstinct, строка 32
if(!$('#car-photo-carousel').data('owlCarousel'))  $('#car-photo-carousel').owlCarousel({});

AnimalInstinct 17.09.2016 16:07

Не помогло


Часовой пояс GMT +3, время: 18:59.