Im having issues with initializing swiper on Safari mobile iOS. It works perfectly fine on any other browser or device.
Looks like DOMContentLoaded is not working properly here:
<script>
'use strict';
(() => {
const initSwipers = (allModuleBanners) => {
const prepareSingleSwiper = (singleBanner) => {
const sliderConfig = singleBanner.dataset.bannerconfig;
const configJson = JSON.parse(sliderConfig);
const sliderForBanner = singleBanner.querySelector('.swiper');
const sliderPagination = sliderForBanner.querySelector('.swiper-pagination');
const sliderNavigationPrev = sliderForBanner.querySelector('.swiper-button-prev');
const sliderNavigationNext = sliderForBanner.querySelector('.swiper-button-next');
const baseConfig = {
slidesPerView: configJson.slidesPerView,
loop: configJson.loop,
speed: configJson.speed,
effect: configJson.effect
}
const finalConfig = Object.assign({}, baseConfig);
if (configJson.autoplay && configJson.autoplay.delay) {
const autoplayElement = {
delay: configJson.autoplay.delay,
pauseOnMouseEnter: configJson.autoplay.pauseOnMouseEnter
}
finalConfig['autoplay'] = autoplayElement;
}
if (configJson.navigation) {
const navigationElement = {
nextEl: sliderNavigationNext,
prevEl: sliderNavigationPrev,
}
finalConfig['navigation'] = navigationElement;
}
if (configJson.pagination) {
const paginationElement = {
el: sliderPagination,
type: 'bullets',
clickable: true
}
finalConfig['pagination'] = paginationElement;
}
const swiper = new Swiper(sliderForBanner, finalConfig);
};
allModuleBanners.forEach(singleBanner => {
const swiperAlreadyExist = singleBanner.querySelector('.swiper').swiper;
if (!swiperAlreadyExist) {
prepareSingleSwiper(singleBanner);
}
});
};
window.addEventListener('DOMContentLoaded', () => {
const allModuleBanners = document.querySelectorAll('.banner-full-one-wrapper .swiper-banner');
if (allModuleBanners.length > 0) {
if (window.Swiper) {
initSwipers(allModuleBanners);
}
}
});
})();
</script>
I saw this workaround in here: https://developer.apple.com/forums/thread/651215 but it doesn’t seem to work for me or I’m not executing it well.