Показать сообщение отдельно
  #1 (permalink)  
Старый 22.04.2016, 19:52
Новичок на форуме
Отправить личное сообщение для habotho Посмотреть профиль Найти все сообщения от habotho
 
Регистрация: 22.04.2016
Сообщений: 2

Owl Carousel 2 слетает в исходное положение после Ajax запроса.
Горячий привет всем участникам сообщества!

Я в 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, помощи и рекомендаций в реализации моих вопросов.

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

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

Последний раз редактировалось habotho, 23.04.2016 в 21:35.
Ответить с цитированием