Как оживить навигацию слайдера на jQuery?

Question

Владимир @vovakin

JavaScript

Как оживить навигацию слайдера на jQuery?

Всем привет. Нужна помощь со слайдером. Написал его по примеру с интернета на jQuery, все работает прекрасно. Однако возникла проблема с навигацией. Мне нужно, чтобы навигация(радибаттоны) понимали на каком мы сейчас находимся слайде и переключались на нужный слайд(чтобы на них вешался активный элемент). Вот пример: https://codepen.io/mayurbirle/pen/NvXKPq
Вот тут при переключении слайдера с помощью стрелок, кнопкам снизу задается активный элемент и все выглядит гармонично.

Вроде понимаю, что тут одну строчку нужно дописать, но я тугодум и пока не особо силен в JS/jQuery. Всем спасибо за помощь. Вот мой код:

var slideNow = 1;
	var slideCount = $('.sliderwrapper').children().length;
  var slideTime = 5000;
  var navBtn = $('.slide-nav');

	navBtn.click(function() {
		navBtn = $(this).index();
		$('.slide-nav-active').removeClass('slide-nav-active');
		$(this).toggleClass('slide-nav-active');
		if (navBtn + 1 != slideNow) {
			var translateWidth = -$('.viewport').width()	* (navBtn);
			$('.sliderwrapper').css({
				'transform': 'translate('+translateWidth+'px,0)',
				'-o-transform': 'translate('+translateWidth+'px,0)',
				'-webkit-transform': 'translate('+translateWidth+'px,0)'
			});
			slideNow = navBtn + 1;
		}
	});

  // setInterval(nextSlide, slideTime);


	$('.arrow-next').click(nextSlide);
	$('.arrow-previous').click(prevSlide);

  function nextSlide() {
		if (slideNow == slideCount || slideNow <=0 || slideNow > slideCount) {
			$('.sliderwrapper').css({
				'transform': 'translate(0,0)',
				'-o-transform': 'translate(0,0)',
				'-webkit-transform': 'translate(0,0)'
			});
			slideNow = 1;
		} else {
			var translateWidth = -$('.viewport').width()	* (slideNow);
			$('.sliderwrapper').css({
				'transform': 'translate('+translateWidth+'px,0)',
				'-o-transform': 'translate('+translateWidth+'px,0)',
				'-webkit-transform': 'translate('+translateWidth+'px,0)'
			});
			slideNow++;
		}
  }
  function prevSlide() {
		if (slideNow == 1 || slideNow <=0 || slideNow > slideCount) {
			var translateWidth = -$('.viewport').width() * (slideCount - 1);
			$('.sliderwrapper').css({
				'transform': 'translate('+translateWidth+'px,0)',
				'-o-transform': 'translate('+translateWidth+'px,0)',
				'-webkit-transform': 'translate('+translateWidth+'px,0)'
			});
			slideNow = slideCount;
		} else {
			var translateWidth = -$('.viewport').width()	* (slideNow - 2);
			$('.sliderwrapper').css({
				'transform': 'translate('+translateWidth+'px,0)',
				'-o-transform': 'translate('+translateWidth+'px,0)',
				'-webkit-transform': 'translate('+translateWidth+'px,0)'
			});
			slideNow--;
		}
  }