Нанесите класс на первый (слева) видимый слайд в увлеченном ползунке карусели ⇐ Html

[Anonymous]

Плагин Carousel, который я использую, является увлеченным слайдером. Я в основном хочу применить активный класс к видимым слайдам-или из-за проблемы, которую я пытаюсь решить, лучшим вариантом может быть просто применение класса к самым левым (первым) слайду.
Моя карусель отображает несколько слайдов, видимое количество варьируется в зависимости от размера видового порта. Например: < /p>

• mobile = 1,5 слайды < /li>
  tablet = 3 слайды < /li>
  Desktop = 5 слайдов.

Причина, по которой мне нужно, это класс, на мобильном (когда видно 1,5 слайда) , i не хочу FigCaption для отображения, если он не полностью в счете просмотра. Таким образом, я могу исчезать/изменить непрозрачность, когда слайд находится на левом краю. >. Следовательно, почему только применение класса к первому видимому слайду может быть хорошо. Но если класс был добавлен ко всем активным слайдам, я думаю, я мог бы нацелиться с Quen-slider__slide.active: First-Child {};
Надеюсь, что объяснение поможет, спасибо в Advance! < /p>

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

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: 5,
spacing: 8
}
}
},
created: function(instance) {
document.getElementById("gallery-slider").classList.add("loaded");
document
.getElementById("arrow-left")
.addEventListener("click", function() {
instance.prev();
});
document
.getElementById("arrow-right")
.addEventListener("click", function() {
instance.next();
});
}
});< /code>
/* ==========================================================================
#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%;
}

.keen-slider .keen-slider__slide figcaption {
margin: 8px 0 0 16px;
}

/* ==========================================================================
#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;
}

/**
* 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 16px 16px;
}

.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;
}
}< /code>

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