Показать сообщение отдельно
  #1 (permalink)  
Старый 10.12.2016, 11:47
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Доработка Slick Slider
Здравствуйте. Довольно давно работаю со слайдером Slick, думаю, многим он известен.

Сейчас встала передо мной такая задача, которую я частично решил, но не могу решить полностью. Вот тут можноувидеть что получилось.

В чем суть. Есть 3 иконки "Как купить", "Как оплатить", "Как получить". По сути, они должны работать как радиокнопки. Это я сделал. Так же как и сделал кастомные радиокнопки и кастомные стрелки (так как дизайн не дает возможности расположить стрелки слайдера так как надо).

Проблема вот в чем.
1. При клики на иконки не могу сделать так, чтобы радиокнопки и иконки между собой "синхронизировались" так, как при клике на стрелки. И наоборот.
2. Иногда слайдер будто живет своей жизнью. Особенно если, например, на стрелку быстро несколько раз нажать.

Помогите, пожалуйста. Прикладываю код, который у меня получился.

$(document).on("click", '.how-top-paging__slide', function() {
	  	$('.how-slider').slick( 'slickGoTo', $(this).data("count"));
	  	$('.how-top-paging span').removeClass('active');
	  	$(this).addClass('active');
	})
	$(document).on("click", '.how-bottom-paging__slide', function() {
	  	$('.how-slider').slick( 'slickGoTo', $(this).data("count"));
	  	$('.how-bottom-paging span').removeClass('active');
	  	$(this).addClass('active');
	 })
	$(document).on("click", '.how__next-slide', function() {
		var findpagingtop = $('.how-top-paging').find('.how-top-paging__slide.active');
		if(!$(findpagingtop).is(":last-child")) {
			findpagingtop.next().click();
		}
		var findpagingbottom = $('.how-bottom-paging').find('.how-bottom-paging__slide.active');
		if(!$(findpagingbottom).is(":last-child")) {
			findpagingbottom.next().click();
		}
	});
	$(document).on("click", '.how__prev-slide', function() {
		var findpagingtop = $('.how-top-paging').find('.how-top-paging__slide.active');
		if(!$(findpagingtop).is(":first-child")) {
			findpagingtop.prev().click();
		}
		var findpagingbottom = $('.how-bottom-paging').find('.how-bottom-paging__slide.active');
		if(!$(findpagingbottom).is(":first-child")) {
			findpagingbottom.prev().click();
		}
	});


Спасибо!
Ответить с цитированием