Слева от первого слайда есть зазор ⇐ Javascript

[Anonymous]

Вот что я сделал: < /p>

html,
body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}

body {
background: #ac2525;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}

swiper-container {
width: 80%;
height: 300px;
overflow: hidden;
border: 1px solid #000;
}

swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease
}

swiper-slide:not(.swiper-slide-active) {
transform: scale(0.9);
}

swiper-container.first-slide-active .swiper-slide:first-child,
swiper-container.last-slide-active .swiper-slide:last-child {
margin-left: -20px;
}

< /code>


Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6




const swiper = document.querySelector(".mySwiper");

swiper.addEventListener("slidechangetransitionend", () => {
const activeIndex = swiper.swiper.activeIndex;
const slides = swiper.swiper.slides;

if (activeIndex === 0) {
swiper.classList.add("first-slide-active");
swiper.classList.remove("last-slide-active");
} else if (activeIndex === slides.length - 1) {
swiper.classList.add("last-slide-active");
swiper.classList.remove("first-slide-active");
} else {
swiper.classList.remove("first-slide-active", "last-slide-active");
}

swiper.swiper.update();
});

< /code>
Чего я пытаюсь достичь здесь: < /p>
Когда на первом слайде (слайд 1) полностью видна, и слайд рядом с ним (Слайд 2) является наполовину видимым, без зазора слева от первого слайда (только 2 слайда, которые будут показаны здесь). < /p>
Когда на средних слайдах (2-5) бывший. На слайде 2 слайд 2 полностью видны, а предварительный слайд (слайд 1) и следующий слайд (слайд 3) наполовину видимы (3 слайда, которые будут показаны здесь). это уже работает, как и ожидалось
, когда на последнем слайде (слайд 6) полностью видна, а предыдущий слайд (слайд 5) наполовину видим, с Нет зазора справа от последнего слайда (только 2 слайда, которые будут показаны здесь).
*** Я также пробовал реагировать без повезло.
Есть идеи, что я сделал неправильно или пропустил? />

ожидаемый результат на первом и последнем слайде:



Подробнее здесь: https://stackoverflow.com/questions/794 ... last-slide