текстовый слайдер со стрелками

Question

Пытаюсь написать циклический текстовый слайдер, работающий при нажатии на стрелки. Пока получилось только вперед, назад никак не выходит, помогите пожалуйста! Ниже мой код:

let slides = ['комбинированная', 'нормальная', 'сухая', 'жирная'];
let btn_next = document.getElementById('right_arrow');
let btn_prev = document.getElementById('left_arrow');


let slides_start = 1;
let slides_count = slides.length - 1;

function next() {
  document.getElementById('skin').innerHTML = slides[slides_start];
  if (slides_start == slides_count) {
    slides_start = 0;
  } else {
    slides_start++;
  }
}

btn_next.onclick = function() {
  next()
}

<div class="choose_param">
  <a href="#" class="left_arrow" id="left_arrow"><img src="img/arr_L.c900d4cf.svg" alt="Previous"></a>
  <p id="skin">комбинированная</p>
  <a href="#" class="right_arrow" id="right_arrow"><img src="img/arr_R.3aa38737.svg" alt="Next"></a>
</div>

Answer 1

Надо сделать, чтобы переменная slides_start равнялась текущему индексу, а не следующему.

let slides = ['комбинированная', 'нормальная', 'сухая', 'жирная'];
let btn_next = document.getElementById('right_arrow');
let btn_prev = document.getElementById('left_arrow');


let slides_start = 0;
let slides_count = slides.length - 1;

function next() {
  if (slides_start == slides_count) {
    slides_start = 0;
  } else {
    slides_start++;
  }
  document.getElementById('skin').innerHTML = slides[slides_start];
}

btn_next.onclick = function() {
  next();
}

function previous() {
  if (slides_start == 0) {
    slides_start = slides_count;
  } else {
    slides_start--;
  }
  document.getElementById('skin').innerHTML = slides[slides_start];
}

btn_prev.onclick = function() {
  previous();
}

<div class="choose_param">
  <a href="#" class="left_arrow" id="left_arrow"><img src="img/arr_L.c900d4cf.svg" alt="Previous"></a>
  <p id="skin">комбинированная</p>
  <a href="#" class="right_arrow" id="right_arrow"><img src="img/arr_R.3aa38737.svg" alt="Next"></a>
</div>

БЛОГ НА HUSL

текстовый слайдер со стрелками

Ответы (1 шт):