Проверить наличие prev(), next() элемента?

Question

[MegaPuxapb]

Необходимо выделить активный элемент(тот который верхний).
Проблема, с 1ым и последним элементом.
Как сделать проверку: при клике не лефт
если (.block.active является первым), .active добавить к последнему элементу и наоборот?

https://jsfiddle.net/xpycm789/j9z1g35o/6/

Answer 1

[0xD34F]

<button data-step="+1">PREV</button>
<button data-step="-1">NEXT</button>

const sliderSelector = '.slider';
const blockSelector = '.block';
const buttonDataAttr = 'step';
const buttonSelector = `[data-${buttonDataAttr}]`;
const activeClass = 'active';
const getActiveBlockIndex = () => ((-pos % len) + len) % len;
const getSliderRotation = () => 'rotate(' + pos * 360 / len + 'deg)';
let pos = 0;

Вот jquery:

const $slider = $(sliderSelector);
const $blocks = $slider.find(blockSelector);
const len = $blocks.length;

$(buttonSelector).click(function() {
  $blocks.eq(getActiveBlockIndex()).removeClass(activeClass);
  pos += parseInt($(this).data(buttonDataAttr));
  $slider.css('transform', getSliderRotation());
  $blocks.eq(getActiveBlockIndex()).addClass(activeClass);
});

А вот jquery нет:

const slider = document.querySelector(sliderSelector);
const blocks = slider.querySelectorAll(blockSelector);
const len = blocks.length;

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  blocks[getActiveBlockIndex()].classList.remove(activeClass);
  pos += +this.dataset[buttonDataAttr];
  slider.style.transform = getSliderRotation();
  blocks[getActiveBlockIndex()].classList.add(activeClass);
});

Comments

[MegaPuxapb]

Спасибо!

Answer 2

[Антон Шаманов]

исползовать :first/:last / :first-child/:last-child