Wenden Sie eine Klasse auf den ersten (links) sichtbaren Rutschen in einem scharfen Schieberegler -Karussell auf ⇐ HTML

[Guest]

Das von mir verwendete Karussell -Plugin ist ein schärfer Slider. Im Grunde möchte ich eine aktive Klasse auf sichtbare Folien anwenden-oder aufgrund des Problems, das ich zu lösen versuche, könnte eine bessere Option darin bestehen, die Klasse auf die linke (erste) In-View-Folie anzuwenden.
Mein Karussell zeigt mehrere Folien an, die sichtbare Menge variiert je nach Größe des Ansichtsfensters. Zum Beispiel: < /p>

• Mobile = 1.5 Objektträger < /li>
  Tablet = 3 Folien < /li>
  Desktop = 5 Folien.

Der Grund, warum ich diese Klasse brauche will nicht das FigCaption anzeigen, es sei denn, es befindet sich vollständig im Ansichtsfenster. Ich kann also die Deckkraft verblassen/ändern, wenn sich die Folie am linken Rand befindet. >. Daher kann es in Ordnung sein, die Klasse nur auf die erste sichtbare Folie anzuwenden. Aber wenn eine Klasse zu allen aktiven Folien hinzugefügt wurde, könnte ich mit Keen-Slider__slide.active: First-Child {};
Ich hoffe, dass diese Erklärung hilft, danke in Voraber! Lang-Js PrettyPrint-Override ">

Code: Select all

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>