Как сделать эффект уходящего слайда?

Question

Господа, скинул фото и код.

Подскажите, пожалуйста, как сделать на слайдере так, как на фото, чтобы прошедшие слайды чуть скейлились в минус и заблюривались?

В плане, каким образом мне поймать элементы, который имеют Position с минусовым значением (прошедшие) и задать им класс, чтобы уже в css стилизовать?

let position = 0;
const showS = 2;
const scrollS = 1;




const container = document.querySelector('.slider-container'); 
const track = document.querySelector('.slider-track'); 
const items = document.querySelectorAll('.slider-item'); 
const prev = document.querySelector('.btn-prev'); 
const next = document.querySelector('.btn-next'); 

const amount = items.length;
const itemWidth = container.clientWidth / showS;
const movePosition = scrollS * itemWidth;
const hiddenMax = (amount - showS) * itemWidth;

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

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

const checkBtns = () => {
    prev.disabled = position === 0;
    next.disabled = position <= -hiddenMax;
};

prev.addEventListener('click', () => {
    position += movePosition;
    if(position === 0) {
        position = 0;
    }
    shiftPosition();
    checkBtns();
});

next.addEventListener('click', () => {
    position -= movePosition;
    if(position <= -hiddenMax) {
        position = -hiddenMax;
    }
    shiftPosition();
    checkBtns();
});



checkBtns();

.slider-container{
    overflow: hidden;
    background-color: pink;
  }
.slider-track{
    display: flex;
    background-color: yellow;
    transition: .2s;
  }

.slider-item{
height: 10rem;
&:nth-child(3n+1){
    background-color: #999;
  }
&:nth-child(3n+2){
    background-color: #777;
  }
&:nth-child(3n+3){
    background-color: #333;
}

.slider-buttons{
    text-align: center;
}

<div class="slider-container">
  <div class="slider-track">
       <div class="slider-item">1</div>
       <div class="slider-item">2</div>
       <div class="slider-item">3</div>
       <div class="slider-item">4</div>
       <div class="slider-item">5</div>
       <div class="slider-item">6</div>
       <div class="slider-item">7</div>
       <div class="slider-item">8</div>
       <div class="slider-item">9</div>
   </div>
 </div>
<div class="slider-buttons">
    <button class="btn-prev">Prev</button>
    <button class="btn-next">Next</button>
</div>

Answer 1

Исходя из кода, задача решается следующим образом:

let position = 0;
const showS = 2;
const scrollS = 1;

const container = document.querySelector('.slider-container');
const track = document.querySelector('.slider-track');
const items = document.querySelectorAll('.slider-item');
const prev = document.querySelector('.btn-prev');
const next = document.querySelector('.btn-next');

const amount = items.length;
const itemWidth = container.clientWidth / showS;
const movePosition = scrollS * itemWidth;
const hiddenMax = (amount - showS) * itemWidth;

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

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

const checkBtns = () => {
  prev.disabled = position === 0;
  next.disabled = position <= -hiddenMax;
};

prev.addEventListener('click', () => {
  position += movePosition;
  if (position === 0) {
    position = 0;
  }
  track.children[Math.abs(position / itemWidth) + 1].classList.toggle(`scale-and-blur`); // Добавлено
  shiftPosition();
  checkBtns();
});

next.addEventListener('click', () => {
  position -= movePosition;
  if (position <= -hiddenMax) {
    position = -hiddenMax;
  }
  track.children[Math.abs(position / itemWidth)].classList.toggle(`scale-and-blur`); // Добавлено
  shiftPosition();
  checkBtns();
});

checkBtns();

.slider-container {
  overflow: hidden;
}

.slider-track {
  display: flex;
  font: bold 96px/1em sans-serif;
  transition: .5s;
}

.slider-item {
  display: grid;
  place-items: center;
  height: 10rem;
  box-shadow: inset 0 0 2px 2px;
  transition: .5s;
}

.slider-item:first-of-type {
  visibility: hidden;
}

.scale-and-blur {
  transform: scale(.5);
  filter: blur(10px);
}

.slider-buttons {
  text-align: center;
}

<div class="slider-container">
  <div class="slider-track">
    <div class="slider-item"><!-- Добавлено --></div>
    <div class="slider-item">1</div>
    <div class="slider-item">2</div>
    <div class="slider-item">3</div>
    <div class="slider-item">4</div>
    <div class="slider-item">5</div>
    <div class="slider-item">6</div>
    <div class="slider-item">7</div>
    <div class="slider-item">8</div>
    <div class="slider-item">9</div>
  </div>
</div>
<div class="slider-buttons">
  <button class="btn-prev">Prev</button>
  <button class="btn-next">Next</button>
</div>

БЛОГ НА HUSL

Как сделать эффект уходящего слайда?

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