@Outsideme

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

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

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

633eea0b438c1682089513.png

.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();
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы