Области видимости переменной из вложенной функций?

Всем привет!
Для карусели картинок написал простенький скрипт для их перещелкивания. Сначала сделал для каждой стрелки свою функцию changeSlideLeftPortfolio(); и changeSlideRightPortfolio();. Затем с целью оптимизации повторящегося кода решил реализовать с использованием 3-ей функции:

var changeSlidePortfolio = function (e) {
  e.preventDefault();

  var slides = document.getElementsByClassName('portfolio__col');
  var activeSlide = document.getElementsByClassName('portfolio__col-active')[0];
  var slidesLength = slides.length;

  for (var i = 0; i < slidesLength; i++) {
    if (slides[i] === activeSlide) break;

    var index = i;
  }
};

var changeSlideLeftPortfolio = function() {
  changeSlidePortfolio(event);

  if (index !== 0) {
    slides[index].classList.remove('portfolio__col-active');
    slides[index - 1].classList.add('portfolio__col-active');
  }
};

var changeSlideRightPortfolio = function() {
  changeSlidePortfolio(event);

  if (index !== slidesLength - 1) {
    slides[index].classList.remove('portfolio__col-active');
    slides[index + 1].classList.add('portfolio__col-active');
  }
};

<a href="#" class="portfolio__arrow portfolio__arrow-left" onclick="changeSlideLeftPortfolio();"></a>
<a href="#" class="portfolio__arrow portfolio__arrow-right" onclick="changeSlideRightPortfolio();"></a>

В итоге каждая из функций прокрутки не видит переменную index из вложенной функции и выдает ошибку: Uncaught ReferenceError: index is not defined.
Подскажите, что делаю не так?