Не срабатывает jquery функция в слайдере

Есть функция на сайте. Код будет ниже. При нажатии на навигацию слайдера, он делает все что угодно, только не то что мне нужно. По сути, пытался сделать так, чтоб функция считывала номер картинки при клике, и после уже двигала элементы к нужному мне. Но в итоге получается, что функция срабатывает то в обратном порядке (отматывает назад), то вперед на 1 элемент, и потом возвращает на первый слайд. Причем получается так, что на одном проекте все сработало отлично, и как задумывалось, а на другом, при тех же исходных - не работает не в какую. Может сталкивался кто?

Код jq:

var wrapperSlide = $('.slider-wraper');
var slideFirst = 1;
var vievPort = $('.viewport');
var navBtnId = 0;
var sliderBtn = $('.btn-slider');

$(document).on('click', sliderBtn, function() {
      navBtnId = $(this).index();

      if (navBtnId + 1 != slideFirst) {
        translateWidth = -vievPort.width() * (navBtnId);
        wrapperSlide.css({
          'transform': 'translate(' + translateWidth + 'px, 0)',
          '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
          '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideFirst = navBtnId + 1;
      }

Код разметки:

<div class="block-slider">
  <div class="viewport">
    <ul id="room-photos-slides" class="slider-wraper">
      <li class="slide">
        <img src="img/page1.jpg" alt="1" class="img">
      </li>
      <li class="slide">
        <img src="img/page2.jpg" alt="2" class="img">
      </li>
      <li class="slide">
        <img src="img/page1.jpg" alt="3" class="img">
      </li>
      <li class="slide">
        <img src="img/page2.jpg" alt="4" class="img">
      </li>
    </ul>
  </div>
  <div class="viewport-outside">
    <ul id="room-photos-buttons" class="slider-menu">
      <li class="btn-slider">
        <img src="img/page1.jpg" alt="1" class="mini-img">
      </li>
      <li class="btn-slider">
        <img src="img/page2.jpg" alt="2" class="mini-img">
      </li>
      <li class="btn-slider">
        <img src="img/page1.jpg" alt="1" class="mini-img">
      </li>
      <li class="btn-slider">
        <img src="img/page2.jpg" alt="1" class="mini-img">
      </li>
    </ul>
  </div>
</div>