Циклическая карусель не отображает нависающее изображение «следующее» до тех пор, пока не будет нажата кнопка навигации. ⇐ CSS

[Anonymous]

У меня есть карусель, которая постоянно зацикливается: следующий/предыдущий слайды отображаются при нажатии соответствующей навигационной ссылки. Для этого я использую Keen Slider.
Края следующего/предыдущего изображения можно рассматривать как нависающие края на левом/правом краю области просмотра.
У меня проблема в том, что изначально это работает хорошо, но когда вы достигаете «Слайда 8», который является концом исходной группы слайдов, на правом краю появляется пробел, когда «следующий» слайд должен быть.
Это не появится, пока вы не нажмете навигационную ссылку «Далее», когда она появится в поле зрения. Кажется, что никогда не возникает проблем со слайдами с левого края (предыдущими), только слайды появляются с правого края после того, как вы первоначально дошли до «Слайда 8».
В качестве отступления , если вы установите количество видимых слайдов preView на 5 (пример ниже), вы не увидите край «Следующего» слайда при загрузке сразу после щелчка по навигации, но кажется, что 4 работайте нормально до цикла и достижения Слайд 8 – не уверен, что это актуально, но решил задокументировать.

Код: Выделить всё

'(min-width: 1024px)': {
slides: {
perView: 4,
spacing: 8
}
}

Это не было бы проблемой, если бы у меня было переполнение: скрыто в карусели, но поскольку я хочу видеть края следующего/предыдущего слайда, это не вариант.
Закомментированный JS
Вы можете увидеть закомментированный JavaScript. Я подумал, что было бы здорово, если бы карусель автоматически воспроизводилась, а затем закрывалась после нажатия на следующую/предыдущую ссылку, но это уже очень следующие шаги, и я пока в этом не уверен. Упоминание просто на случай, если люди задаются вопросом, почему это здесь.

Код: Выделить всё

/* Lazy Load Effect */

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
const img = div.querySelector("img")

function loaded() {
div.classList.add("loaded")
}

if (img.complete) {
loaded()
} else {
img.addEventListener("load", loaded)
}
})

/* Keen Slider */

// var animation = { duration: 40000, easing: (t) => t }
new KeenSlider("#gallery-slider", {
loop: true,
mode: "free-snap",
slides: {
perView: 1.5,
renderMode: "precision",
spacing: 8
},
breakpoints: {
'(min-width: 768px)': {
slides: {
perView: 3,
spacing: 8
}
},
'(min-width: 1024px)': {
slides: {
perView: 4,
spacing: 8
}
}
},
created: function(instance) {
document.getElementById("gallery-slider").classList.add("loaded");
//s.moveToIdx(4, true, animation);
document
.getElementById("arrow-left")
.addEventListener("click", function() {
instance.prev();
});
document
.getElementById("arrow-right")
.addEventListener("click", function() {
instance.next();
});
}
// updated(s) {
//    s.moveToIdx(s.track.details.abs + 4, true, animation);
// },
// animationEnded(s) {
//    s.moveToIdx(s.track.details.abs + 4, true, animation);
// }
});

Код: Выделить всё

/* ==========================================================================
#BASE
========================================================================== */

html {
font-size: 62.5%;
margin: 0;
padding: 0;
}

body {
font-size: 12px;
font-family: "Arial", sans-serif;
margin: 0;
padding: 64px 0 0;
text-transform: uppercase;
}

h2 {
font-size: 12px;
font-weight: 400;
margin: 0 16px 16px;
padding: 0;
}

figure {
margin: 0;
padding: 0;
}

img {
height: auto;
width: 100%;
max-width: 100%;
}

/* ==========================================================================
#KEEN SLIDER
========================================================================== */

.keen-slider {
display: flex;
align-content: flex-start;
overflow: hidden;
position: relative;
touch-action: pan-y;
user-select: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
}

.keen-slider .keen-slider__slide {
min-height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}

/* ==========================================================================
#GALLERY
========================================================================== */

/**
* My overrides for the Keen Slider gallery.
*
* 1. Remove `overflow: hidden` from the slider and add it to the parent. This
*    allows the slider to align with the grid but also bleed off the edges of
*    the page.
* 2. Align container with the global grid.
*/

.gallery {
margin-bottom: 64px;
overflow: hidden;
/* [1] */
padding: 0 32px;
/* [2] */
}

.gallery .keen-slider {
overflow: visible;
/* [1] */
}

/**
* As the widths for each slide are set in Javascript.  We add widths to slides
* before `.keen-slider` has loaded to keep the layout consistent and help with
* the Cumulative Layout Shift (CLS) and performance.
*/

.keen-slider:not(.loaded) .keen-slider__slide {
width: calc((100vw / 1.5) - 24px);
}

@media(min-width: 48em) {
.keen-slider:not(.loaded) .keen-slider__slide {
width: calc((100vw - 48px) / 3);
}
}

@media(min-width: 64rem) {
.keen-slider:not(.loaded) .keen-slider__slide {
width: calc((100vw - 56px) / 4);
}
}

/**
* Navigation for the gallery (prev/next).
*/

.gallery__nav {
display: flex;
justify-content: space-between;
margin: 0 0 16px;
width: 100%;
}

.gallery__nav .arrow {
cursor: pointer;
user-select: none;
}

/* ==========================================================================
#PIXEL LOAD
========================================================================== */

/**
* Add a pixelated effect to images while the load.
*/

.pixel-load {
overflow: hidden;
position: relative;
}

.pixel-load__preload img {
image-rendering: pixelated;
position: absolute;
inset: 0;
opacity: 1;
pointer-events: none;
}

.loaded .pixel-load__preload img {
animation: loaded .32s .16s steps(1, end) both;
}

@keyframes loaded {
0% {
scale: 2;
}

33% {
scale: 1.5;
}

66% {
scale: 1;
}

100% {
opacity: 0;
z-index:  1;
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... tion-is-cl