Mein Karussell hat die Zeit verdoppelt, dass die Scrolls auf die nächste Folie nach 1 Zyklus wartet. Wie kann ich das au ⇐ CSS

[Anonymous]

Ich habe eine Folie mit unendlichem Scrollen geschrieben: < /p>

Ich klone die Objektträger < /li>
Ich bekomme die ID des aktiven, < /li>
Bewegen Sie den Behälter so, dass die aktive Folie in der Mitte befindet, < /li>
Autoscrolle in die Mitte, < /li>
Autotoskrohr, die Slides. /> < /ol>
Jetzt habe ich ein Problem, dass nach einem vollständigen
-Zyklus beim Schalten vom klonierten Folie 1 auf die ursprüngliche Folie
1 eine doppelte Verzögerung vor dem Umschalten auf Folie 2 < /strong> < /em> besteht. Dies geschieht
, da ich die Animation des Containermischungen entfernen und sofort auf die ursprüngliche Folie 1 wechseln, aber das Intervall wird nicht zurückgesetzt. Ich habe versucht, das Intervall zurückzusetzen, aber es hat bei mir nicht funktioniert, also habe ich
etwas falsch gemacht. Da ich nicht genug Wissen habe, um dies zu beheben, bitte ich Sie, dieses Verhalten zu beheben. Warum gab es keine doppelte Verzögerung
beim Wechsel von der geklonten Folie 1 auf den ursprünglichen Folie 1 und
dann zum Schieben auf 2. < /p>

Code: Select all

    // DOM
const slider = document.querySelector(".slider");
const sliderContainer = document.querySelector(".slider__track");
let slides = Array.from(document.querySelectorAll(".slider__slide"));

// Values
const slidesPerView = 3;
let activeSlideID = 0;
let calculatedPos;

// Functions
const cloneSlides = function () {
// clone slides and delete attribute 'data-active'
const firstSlides = getCuttedSlidesArr("firstSlides", slides).map((slide) => cloneSlideWithoutAttr(slide));
const lastSlides = getCuttedSlidesArr("lastSlides", slides).map((slide) => cloneSlideWithoutAttr(slide));

// add clone to the beginning of "container" and to the end
sliderContainer.append(...firstSlides);
sliderContainer.prepend(...lastSlides);

slides = Array.from(document.querySelectorAll(".slider__slide"));
};

function getCuttedSlidesArr(type, array) {
if (type === "firstSlides") {
return array.slice(0, slidesPerView);
} else if (type === "lastSlides") {
return array.slice(-slidesPerView);
}
}

function cloneSlideWithoutAttr(slide) {
const clonedSlide = slide.cloneNode(true);
clonedSlide.removeAttribute("data-active");
return clonedSlide;
}

function getIdFromActiveSlide() {
for (let i = 0; i < slides.length; i++) {
if (slides[i].hasAttribute("data-active")) {
activeSlideID = i;
}
}
}

function centerActiveSlide() {
const sliderWidth = slider.offsetWidth;

const activeSlideWidth = slides[activeSlideID].offsetWidth;
const activeSlideOffset = slides[activeSlideID].offsetLeft;

const calculatedPos = sliderWidth / 2 - (activeSlideOffset + activeSlideWidth / 2);

sliderContainer.style.transform = `translateX(${calculatedPos}px)`;
sliderContainer.style.transition = `all`;
}

function autoChangeSlides() {
if (activeSlideID < slides.length) {
activeSlideID++;
centerActiveSlide();
sliderContainer.style.transform = `translateX(${calculatedPos}px)`;
sliderContainer.style.transition = `0.5s ease`;
}

if (activeSlideID > slides.length - slidesPerView) {
activeSlideID = slidesPerView;
centerActiveSlide();
}
}

// Call
cloneSlides();
getIdFromActiveSlide();
centerActiveSlide();

const autoChangeInterval = setInterval(autoChangeSlides, 1000);

Hier ist ein Link zu CodeOpen, um besser zu verstehen: https://codepen.io/plupiks/pen/zyyqpae