I am on Chrome/ Mac 
It’s hard to tell from the video as I can’t tell when you click but it seems to be behaving exactly like I described above.
When you click first nothing happens,. When you click second nothing really happens as its the same action. When you click a third time it changes instantly because that’s the slide version. If you click again nothing happens because you are back in dark-mode again and no change to the swiper.
Try the code in post #4 as that has only 2 states and they will change straight away. (Maybe add more slides for testing.)
To change the slide you just change the argument on the js.
e.g.
swiper = initSwiper('fade', 'true');
‘fade’ is passed into the slider so if you change that to ‘slide’ it will start the slide. The true value is for the loop and sets it to true. It probably should not have quotes around it.
You can do the same for the autoplay and just pass a large value for the delay so it never happens.
If you put that all together you get this.
const html = document.querySelector('html');
const button = document.querySelector('.contrast__link');
button.addEventListener('click', e => {
e.preventDefault();
if (html.classList.contains('dark-mode')) {
html.classList.remove('dark-mode');
html.classList.add('retro');
let slideIndex = swiper.activeIndex;
swiper.destroy(true, true);
swiper = initSwiper('fade', true, 999999);/* this will fade and not autoplay*/
swiper.slideTo(slideIndex, 0);
} else if (html.classList.contains('retro')) {
html.classList.remove('retro');
let slideIndex = swiper.activeIndex;
swiper.destroy(true, true);
swiper = initSwiper('slide', false, 2000);/* this will slide, it won't loop and will autoplay*/
swiper.slideTo(slideIndex, 0);
} else {
html.classList.add('dark-mode');/* this changes nothing with the slider. The lae slider will stay activated*/
}
});
/* CAROUSEL */
var caption = document.querySelector(".swiper-caption");
const effect = 'fade';
const type = true;
var myDelay = 1200;
let swiper = initSwiper(effect,type,myDelay);
function initSwiper(effect, type, myDelay) {
return new Swiper(".swiper", {
// Disable preloading of all images
preloadImages: false,
observer: true,
// Enable lazy loading
lazy: true,
effect: effect,
fadeEffect: {
crossFade: true
},
loop: type,
autoplay: {
delay: myDelay,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
}
So the code above allows you to change from slide to fade and stop or start the autoplay and loop values. You just need to put them where you want then to happen.
That still won’t change your logic. At the moment dark-mode does nothing. When you go back to dark-mode the swiper will stay in whatever state it was in before you toggled the class. If you wanted dark-mode to be a fade (or a slide) then you need to reinitialise it in that last else statement as with the ones before.
