Как стилизовать отдельные блоки в карусели на javascript?

Question

[Clear-sky]

https://jsfiddle.net/Vikkelas/L9kqhy74/19/

Имеется вот такой слайдер - подскажите алгоритм для решения: нужно стилизовать контент слайдера так что бы видимая область из трех слайдеров показывала подпись только у центрального то есть по бокам были только картинки а в центре картинка с надписями!? можно ли как то дописать этот код?

Answer 1

[Александр]

добавить всем ссылкам с классом description-product атрибут hidden

items.forEach((item) => {
    item.style.minWidth = `${itemWidth}px`;
    item.querySelector('.description-product').hidden = true;
});

и убирать его только там, где нужно показывать описание (hidden = false) то есть для центральной картинки

Comments

[Clear-sky]

Спасибо! суть понял)

[Clear-sky]

Видимо моих знаний пока не хватает ((( не догоняю как обратиться к центральному элементу? ведь есть контейнер с его длинной в котором расположены блоки и по сути отображается контейнер и он же перемещается с элементами внутри(((

[Александр]

Clear-sky, у вас есть несколько элементов в массиве. там, где рассчитывается положение или смещение элементов, нужно добавить функцию, которая будет рассчитывать и помечать как-то три видимых элемента. или же только один центральный. на основании этого расчета можно и присваивать нужный атрибут.

[Clear-sky]

Спасибо большое за наводки!

[Александр]

Clear-sky, а если у вас всегда показ начинается слева, то вы можете назначить второму элементу видимое описание. а при клике на кнопки вычислять номер элемента, которому нужно показать описание

[Александр]

Clear-sky,
вот так как-то

let position = 0;
const slidesToShow = 3;
const slidesToScroll = 1;
const container = document.querySelector('.slider-container');
const track = document.querySelector('.slider-track');
const btnPrev = document.querySelector('.btn-prev');
const btnNext = document.querySelector('.btn-next');
const items = document.querySelectorAll('.slider-item');
const itemsCount = items.length;
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;

let showIdx = 1

items.forEach((item, idx) => {
  item.style.minWidth = `${itemWidth}px`;
});

btnNext.addEventListener('click', () => {
  const itemsLeft = (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
  position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
  showIdx++;
  setPosition();
  checkBtns();		
});

btnPrev.addEventListener('click', () => {
  const itemsLeft = Math.abs(position) / itemWidth;
  position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
  showIdx--;
  setPosition();
  checkBtns();

});



const setPosition = () => {
  track.style.transform = `translateX(${position}px)`;
};

function checkBtns () {
  btnPrev.disabled = position === 0;
  btnNext.disabled = position <= -(itemsCount - slidesToShow) * itemWidth;
  items.forEach((item, idx) => {
    if (idx !== showIdx) {
      item.querySelector('.description-product').hidden = true;
    } else {
      item.querySelector('.description-product').hidden = false;
    }
  });

}

checkBtns();

[Александр]

Clear-sky, Пожалуйста

[Clear-sky]

Да так работает все, но только в одну сторону, в обратную смещение в право происходит при обратом клике

[Александр]

Clear-sky, немного ошибся. для кнопки назад надо showIdx--;
я поправил в комментарии код

[Clear-sky]

что то с расчетами ширины видимо и походу придется как то зацикливать

[Clear-sky]

Да так отлично спасибо! но без зацикливание не добирается описание до последнего и первого элемента))) буду ломать ))

[Clear-sky]

А так спасибо большое!

[Александр]

Clear-sky, здесь надо подумать над алгоритмом. как оно должно работать. а первоначальный индекс элемента для показа можно рассчитывать в зависимости от того, сколько элементов показывается. ну и вообще, простор для фантазии