Javascript-форум - Доработка Slick Slider

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Доработка Slick Slider (https://javascript.ru/forum/jquery/66347-dorabotka-slick-slider.html)

Доработка 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();
		}
	});

Спасибо!

Цитата:

Сообщение от Rise (Сообщение 437563)

Alexbelkevich, тебе надо просто изменить существующие стили стандартных точек навигации и стрелок слайдера и всё ("дизайн не дает" учи css и всё даст) - это и называется кастомные, а создать левые элементы и писать к ним скрипт дублируя функционал слайдера это чушь собачья а не кастомизация...

Каждый слайдер имеет обычно 2 вида прокрутки - с помощью стрелок и с помощью радиокнопок. В данном случае получается, что здесь 2! вида радиокнопок. Интересно, каким образом я могу это сделать, если поддерживается только один вид?

Rise,
Где здесь есть возможность использовать радиокнопки дважды? Их можно включить/ выключить, задать классы. Не более того

slick 1.6.0 дополнительные кнопки управления

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://code.jquery.com/jquery-compat-git.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">
</script>
  <style type="text/css">
.how-top-paging__slide.active{
    background-color:#FF0000;
  }

  span{
    margin:8px;
  }
  </style>

  <title>Slick variableWidth centerMode</title>
  <script>
$(window).on("load", function() {
    var slider = $(".how-slider");
    slider.slick({
        draggable: !1,
        arrows: !1,
        autoplay: !1
    });
    var dot = $(".how-top-paging__slide");
    slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
        dot.removeClass("active").eq(nextSlide).addClass("active")
    });
    dot.on("click", function() {
        var i = dot.index(this);
        slider.slick("slickGoTo", i)
    });
    $(".how__prev-slide").on("click", function() {
        slider.slick("slickPrev")
    });
    $(".how__next-slide").on("click", function() {
        slider.slick("slickNext")
    })
  });

  </script>
</head>

<body>
  <div class="how-top-paging">
    <span class="how-top-paging__slide active" data-count="0">11</span><span class="how-top-paging__slide" data-count="1">22</span><span class="how-top-paging__slide" data-count="2">33</span>
  </div>

  <div class="how-slider">
    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+1"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3"></div><!-- /.hotel-slider__slide -->
  </div><!-- /.hotel-slider -->
  <span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>

рони,
Спасибо большое!