Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.09.2016, 11:33
Аватар для AnimalInstinct
Интересующийся
Отправить личное сообщение для AnimalInstinct Посмотреть профиль Найти все сообщения от AnimalInstinct
 
Регистрация: 10.06.2014
Сообщений: 23

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

Как лучше сделать?
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2016, 12:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

AnimalInstinct,
строку 5 перенесите в строку 1.
или в строках 37 , 41 укажите селектор а не используйте переменную
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2016, 12:31
Аватар для AnimalInstinct
Интересующийся
Отправить личное сообщение для AnimalInstinct Посмотреть профиль Найти все сообщения от AnimalInstinct
 
Регистрация: 10.06.2014
Сообщений: 23

Сделал так, но пока получаю ту же ошибку 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 + '"/>');
                }
            });
        });
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2016, 15:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

AnimalInstinct, строка 32
if(!$('#car-photo-carousel').data('owlCarousel'))  $('#car-photo-carousel').owlCarousel({});
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2016, 16:07
Аватар для AnimalInstinct
Интересующийся
Отправить личное сообщение для AnimalInstinct Посмотреть профиль Найти все сообщения от AnimalInstinct
 
Регистрация: 10.06.2014
Сообщений: 23

Не помогло
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление слайдов в слайдер через Ajax REI555 Общие вопросы Javascript 1 01.02.2016 15:51
Добавление, изменение, удаление данных через JS Арсений JustPuk Общие вопросы Javascript 2 27.04.2015 09:46
Значение переменной через запятую DDSSDD Серверные языки и технологии 41 16.10.2014 15:01
Добавление кнопки через расширение Diablos Общие вопросы Javascript 7 16.12.2011 18:54
Добавление html через $(this).text() basist jQuery 1 26.09.2009 11:57