Здравствуйте. Довольно давно работаю со слайдером 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();
}
});
Спасибо!
