Quantcast
Channel: Drupal - commerce
Viewing all articles
Browse latest Browse all 344

Owl Carousel 2 слетает в дефолтное положение после Ajax запроса.

$
0
0

Всем пламенный привет!

Кровь из носа требуется рабочее решение моего вопроса. Делаю сайт на Drupal 7. Есть страница товара (дверь), у которого есть несколько атрибутов: цвет, цвет стекла и прочие. Атрибуты сделаны с помощью модуля Commerce Fancy Atributes. Все эти атрибуты (миниатюры моделей дверей, блок атрибутов "Цветовое решение"и остальные) представляют из себя карусели, работающие на Owl Carousel 2. Кликая по атрибутам, по Ajax запросу выводится большое изображение двери с соответствующими атрибутам параметрами (цвет, цвет стекла и прочие) и своим набором атрибутов.

Ссылка на текущую версию сайта

Все бы ничего, но столкнулся с такой проблемой: при первой загрузке страницы активных слайдов с миниатюрами моделей 13 штук (всего их будет порядка 50, сейчас пока 14). Если скажем прокрутить карусель на один слайд вперед и кликнуть по 14-му слайду, по Ajax запросу загружается выбранная модель со своим набором атрибутов, а карусель переключается в исходное положении, и получается так, что 14-й слайд на карусели не виден, а надо, чтобы карусель осталась в том же положении, что и до клика, это касается и других каруселей ниже. Так же хотелось бы реализовать следующее: если справа есть неактивные слайды, то при клике на средний+1 слайд карусель сдвигалась на один слайд вперед, при клике на средний+2 слайда карусель сдвигалась на два слайда вперед , при клике на средний+3 слайда карусель сдвигалась на три слайда вперед и так далее, аналогично и в левом направлении.

Код js у меня сейчас выглядит так:

(function($){
    Drupal.behaviors.myBehavior={
      attach:function(context){
        $('.attribute-widgets > div > div ').addClass("owl-carousel");
        $('.attribute-widgets > div > div ').addClass("owl-theme");
        var owl = $('.owl-carousel');
            owl.owlCarousel({
                dots:false,
                margin:10,
                autoWidth:false,
                responsive:{
                    640:{
                        items:3,
                        nav:true,
                        navText:"",
                    },
                    768:{
                        items:4,
                        nav:true,
                        navText:"",
                    },
                    1024:{
                        items:7,
                        nav:true,
                        navText:"",
                    },
                    1280:{
                        items:9,
                        nav:true,
                        navText:"",
                    },
                    1366:{
                        items:10,
                        nav:true,
                        navText:"",
                    },
                    1600:{
                        items:13,
                        nav:true,
                        navText:"",
                    },
                }
            });
        }
    };
})(jQuery);

Прошу вас, гуру js и drupal, помощи и рекомендаций в реализации моих вопросов.

Заранее премного благодарен за оказанное внимание.

Спасибо,
Илья

Версия Drupal: 
Модули и темы: 
0 Спасибо

Viewing all articles
Browse latest Browse all 344

Trending Articles