Proponuję, zamiast transform: translateX(...)
carousel.style.transform = `translateX(${slideOffset}px)`;
użyć transition: left
carousel.style.transition = `left ${carouselSlideLeftDuration}ms ease-in-out`;
carousel.style.left = `-${blockWidth}px`;
i w css
.carousel-block {
float: left;
...
}
Propozycja zmian [ on-line ]
<div class="carousel-container">
<div class="carousel-items">
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=1' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=2' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=3' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=4' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=5' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=6' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=7' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=8' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=9' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=10' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=11' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=12' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=13' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=14' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=15' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=16' alt=''>
</a>
</div>
<div class='carousel-block'>
<a href="#">
<img src='https://picsum.photos/260/300?random=1' alt=''>
</a>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--image-count: 18;
}
.carousel-container {
position: absolute;
width: 100%;
height: 305px;
overflow: hidden;
}
.carousel-items {
width: calc(100% * var(--image-count));
position: relative;
height: 100%
}
.carousel-block {
float: left;
width: 260px;
height: 100%
}
.carousel-block img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: scale 1.4s;
scale: .7;
}
.color-slide img {
filter: grayscale(0);
scale: .9;
opacity: 1;
}
const carousel = document.querySelector('.carousel-container'),
carouselItems = carousel.querySelector('.carousel-items'),
blockCount = carousel.querySelectorAll('.carousel-block').length,
blockWidth = carousel.querySelector('.carousel-block').offsetWidth;
const carouselSlideIntervalDuration = 1600, // 1.6s
carouselSlideLeftDuration = 700; // 0.7s
let intervalId;
function carouselSlide() {
carouselItems.style.transition = `left ${carouselSlideLeftDuration}ms ease-in-out`;
carouselItems.style.left = `-${blockWidth}px`;
setTimeout(() => {
const firstBlock = carouselItems.querySelector('.carousel-block');
const newBlock = firstBlock.cloneNode(true);
carouselItems.appendChild(newBlock);
carouselItems.removeChild(firstBlock);
carouselItems.style.transition = 'none';
carouselItems.style.left = '0px';
}, carouselSlideLeftDuration);
}
document.addEventListener('DOMContentLoaded', () => {
function startCarousel() {
carouselSlide();
intervalId = setInterval(() => { carouselSlide(); }, carouselSlideIntervalDuration);
}
function stopCarousel() {
clearInterval(intervalId);
}
document.body.style.setProperty('--image-count', blockCount);
startCarousel();
carousel.addEventListener('mouseenter', stopCarousel);
carousel.addEventListener('mouseleave', startCarousel);
});
BTW, pozostawiłem Tobie "znalezienie" sposobu jak dodać animacje, które masz w Twoim kodzie 