Как сделать на слайдере так, как на фото, чтобы прошедшие слайды чуть скейлились в минус и заблюривались?
В плане, каким образом мне поймать элементы, который имеют position с минусовым значением (прошедшие) и задать им класс, чтобы уже в css стилизовать?
.slider-container{
overflow: hidden;
height: 27rem;
width: 72rem;
}
.slider-track{
display: flex;
transition: .2s;
}
.slider-item{
height: 27rem;
width: 36rem;
iframe{
height: 100%;
width: 100%;
}
&:nth-child(3n+1){
background-color: red;
}
&:nth-child(3n+2){
background-color: blue;
}
&:nth-child(3n+3){
background-color: yellow;
}
}
.slider-buttons{
text-align: center;
}
<div class="slider-container">
<div class="slider-track">
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
<div class="slider-item"></div>
</div>
</div>
<div class="slider-buttons">
<button class="btn-prev">Prev</button>
<button class="btn-next">Next</button>
</div>
let position = 0;
const slidesToShow = 4;
const slidesToScroll = 3;
// Elements
const container = document.querySelector('.slider-container');
const track = document.querySelector('.slider-track');
const items = document.querySelectorAll('.slider-item');
// Buttons
const btnPrev = document.querySelector('.btn-prev');
const btnNext = document.querySelector('.btn-next');
const itemsCount = items.length;
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;
items.forEach((item) => {
item.style.minWidth = `${itemWidth}px`;
});
const rightHiddenSlides = (itemsCount - slidesToShow) * itemWidth;
prev.addEventListener('click', () => {
position += movePosition;
if (position >= 0) {
position = 0;
}
setPosition();
checkBtns();
});
next.addEventListener('click', () => {
position -= movePosition;
if (position <= -rightHiddenSlides) {
position = -rightHiddenSlides;
}
setPosition();
checkBtns();
});
const setPosition = () => {
track.style.transform = `translateX(${position}px)`;
};
const checkBtns = () => {
btnPrev.disabled = position === 0;
btnNext.disabled = position <= -rightHiddenSlides;
};
checkBtns();