I want the slider to get to the last slide and stop.
I have an image and then a form in a slider, how can I make it stop on the last slide?
I tried this and it’s still won’t stop on the last slide.
document.addEventListener(‘DOMContentLoaded’, function () {
const slider = document.getElementById(‘form-slide’);
if (!slider) return;
const content = slider.querySelector(’.x-slide-container-content’);
const slides = slider.querySelectorAll(’.x-slide’);
if (!content || slides.length === 0) return;
const totalSlides = slides.length;
function getCurrentSlideIndex() {
const selected = slider.querySelector(’.x-slide.is-selected’);
return Array.from(slides).indexOf(selected);
}
const stopAutoplay = () => {
const autoplayAttr = ‘data-x-slide-container’;
let config = slider.getAttribute(autoplayAttr);
if (config) {
try {
config = JSON.parse(config);
config.autoplay = ‘’;
slider.setAttribute(autoplayAttr, JSON.stringify(config));
} catch (e) {
console.warn(‘Could not parse slide container config’, e);
}
}
// kill any running timers attached to the slider
if (slider.__x_slide_interval) {
clearInterval(slider.__x_slide_interval);
slider.__x_slide_interval = null;
}
// double-kill autoplay loop if set by internal ThemeCo code
const intervalID = slider.getAttribute('data-x-autoplay-id');
if (intervalID) {
clearInterval(parseInt(intervalID));
slider.removeAttribute('data-x-autoplay-id');
}
};
const observer = new MutationObserver(() => {
const currentIndex = getCurrentSlideIndex();
if (currentIndex === totalSlides - 1) {
stopAutoplay();
observer.disconnect();
}
});
observer.observe(content, {
attributes: true,
attributeFilter: [‘class’],
subtree: true
});
});
Hi @Emperor,
If I understand correctly, you’re looking to stop the slider when it reaches the end. In that case, you can use the Slider Container > Options > Wrap > Reset option. This setting ensures that when the slider reaches the last slide, it stops. To go back to the beginning, you’ll need to click the Next button manually.
Hope this helps!
Thanks.
