Slider cycle control

[Emperor]

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?

[Emperor]

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
});
});

[tristup]

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.

[Emperor]

I don’t have that option??

[ruenel]

Hey @Emperor,

You must be using the Stacked Slider. Regretfully the Slider element does not have an option that stops the slider at the last slide. Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Cheers.

[Emperor]

I am. Any chance you could suggest how to target the Slider. None of the Custom Code I’ve done is working since we can’t target the Slider.

[tristup]

Hi @Emperor,

Unfortunately, the questions related to the custom code are beyond the scope of Theme Support. I would suggest you hire a developer who can assist you with this customization, or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks