| habotho | 22.04.2016 19:52 |
Owl Carousel 2 слетает в исходное положение после Ajax запроса.
Горячий привет всем участникам сообщества!
Я в js полный ноль, по-этому надеюсь найти решение своей проблемы на этом форуме.
Делаю сайт на Drupal 7. Есть страница товара (дверь), у которого есть несколько атрибутов: цвет, цвет стекла и прочие.
Все эти атрибуты (миниатюры моделей дверей, блок атрибутов "Цветовое решение" и остальные) представляют из себя карусели, работающие на Owl Carousel 2. Кликая по атрибутам, по Ajax запросу выводится большое изображение двери с соответствующими атрибутам параметрами (цвет, цвет стекла и прочие) и своим набором атрибутов.
Все бы ничего, но столкнулся с такой проблемой: при первой загрузке страницы активных слайдов с миниатюрами моделей 13 штук (всего их будет порядка 50, сейчас пока 14). Если скажем прокрутить карусель на один слайд вперед и кликнуть по 14-му слайду, по Ajax запросу загружается выбранная модель, а карусель выводится в исходном положении со startPosition 0 по дефолту, и получается, что 14-й слайд на карусели не виден, а надо, чтобы карусель осталась в том же положении до клика, это касается и других каруселей ниже. Так же хотелось бы, если справа есть неактивные слайды, то при клике на средний+1 слайд карусель сдвигалась на один слайд вперед, при клике на средний+2 слайда карусель сдвигалась на два слайда вперед , при клике на средний+3 слайда карусель сдвигалась на три слайда вперед и так далее, аналогично и в левом направлении.
Код js у меня сейчас выглядит так:
Прошу вас, гуру js, помощи и рекомендаций в реализации моих вопросов.
Заранее премного благодарен за оказанное внимание.
Спасибо,
Илья
Я в js полный ноль, по-этому надеюсь найти решение своей проблемы на этом форуме.
Делаю сайт на Drupal 7. Есть страница товара (дверь), у которого есть несколько атрибутов: цвет, цвет стекла и прочие.
Все эти атрибуты (миниатюры моделей дверей, блок атрибутов "Цветовое решение" и остальные) представляют из себя карусели, работающие на Owl Carousel 2. Кликая по атрибутам, по Ajax запросу выводится большое изображение двери с соответствующими атрибутам параметрами (цвет, цвет стекла и прочие) и своим набором атрибутов.
Все бы ничего, но столкнулся с такой проблемой: при первой загрузке страницы активных слайдов с миниатюрами моделей 13 штук (всего их будет порядка 50, сейчас пока 14). Если скажем прокрутить карусель на один слайд вперед и кликнуть по 14-му слайду, по Ajax запросу загружается выбранная модель, а карусель выводится в исходном положении со startPosition 0 по дефолту, и получается, что 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, помощи и рекомендаций в реализации моих вопросов.
Заранее премного благодарен за оказанное внимание.
Спасибо,
Илья