Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2016, 02:24
Новичок на форуме
Отправить личное сообщение для habotho Посмотреть профиль Найти все сообщения от habotho
 
Регистрация: 22.04.2016
Сообщений: 2

Закинул текущую версию сайта на тестовый хостинг: http://goo.gl/Rg9kIx
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод тега <script> после ajax запроса в указанном div`е Dimkus AJAX и COMET 1 27.02.2012 01:41
Обработка данных во время AJAX запроса user783 AJAX и COMET 5 09.12.2011 03:24
Проблема с выводом информации после запроса с помощью ajax Dimario AJAX и COMET 0 23.07.2011 17:08
Проблема с событиями после ajax запроса Mirgorod AJAX и COMET 5 12.06.2010 18:24
Сохранение результата ajax запроса после нажатия 'back' gregOlsen AJAX и COMET 5 18.11.2009 12:23