Safari / swiper not working properly

[cnairi]

Hello,

I have developed a swiper for a PWA, that has to work also in users' browsers.

It works perfectly on Chrome, but not with Safari.

I have tried with the following devices :

• iPhone 8Plus ios version 11.0
• iPhone 7 ios version 12.2
• iPhone 8 ios version 12.4.1

react-id-swiper version : 2.3.2

Here is what's happening :

• The images are loaded, as well as the left and right arrows
• The pagination bullets are not loaded (can't see them)
• The swipe is possible but very slow, and the loop does not work (if I swipe to the left while I am on the first image, I see black instead of seeing the last image of the slider).

Does anyone know what is going on ?

Thanks a lot !

[nindyahapsari]

Hi, I have the same problems with the pagination. I wanted to have the bullet type pagination, but it doesn't seems to work..

I tried several things to make it work but still no luck :(

[cnairi]

Hey @nindyahapsari I've finally managed to implement it :)

I'm currently at work but I'll create a sandbox working demo asap !

[nindyahapsari]

hi @cnairi ,

I just found a temporary solution but im not sure if it's the best one.

What I did was, I just style the ".swiper-pagination-bullets" and the ".swiper-pagination-bullet" in CSS. Some how it works, it shows me the bullet paginations.

But maybe you have a better solutions for that.

Looking forward for your demo :)

[mlvrkhn]

@cnairi could you share a solution please?

[cnairi]

Hello @mlvrkhn,

I'm not working for the same company anymore.

I manage to find the code, but it seems reallyyy old (and needs to be cleaned)... The version of react-id-swiper was 2.4.0.

Here it is :

import React, { memo, useEffect} from 'react';
import css from 'client:styles/components/step/content/storiesSlider.scss';
import ReactIdswiper from 'react-id-swiper';

const cx = classNames.bind(css);

export default memo(({children}) => {
	const params = {
		initialSlide: 0,
		pagination: {
			el: '.swiper-pagination',
			type: 'bullets',
			clickable: true
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		},
		spaceBetween: 0,
		loop: true,
		on: {
			init() {
				const mySwiper = document.querySelector('.swiper-container').swiper;
				mySwiper.realIndex = 0;
				mySwiper.slideToLoop(mySwiper.realIndex, 0, false);
			},
			slideChangeTransitionStart() {
				const mySwiper = document.querySelector('.swiper-container').swiper;
				let $wrapperEl = mySwiper.$wrapperEl;
				let params = mySwiper.params;
				$wrapperEl.children(('.' + (params.slideClass) + '.' + (params.slideDuplicateClass)))
					.each(function () {
						let idx = this.getAttribute('data-swiper-slide-index');
						this.innerHTML = $wrapperEl.children('.' + params.slideClass + '[data-swiper-slide-index="' + idx + '"]:not(.' + params.slideDuplicateClass + ')').html();
				});
			},
			slideChangeTransitionEnd() {
				const mySwiper = document.querySelector('.swiper-container').swiper;
				mySwiper.slideToLoop(mySwiper.realIndex, 0, false);
			}}
	};

	useEffect(() => {
		const mySwiper = document.querySelector('.swiper-container').swiper;
		if (mySwiper) {
			mySwiper.$el[0].classList.add(cx('swiper-container-custom'));
			mySwiper.$el[0].children[1].classList.add(cx(['swiper-pagination-custom']));
			mySwiper.$el[0].children[2].classList.add(cx('swiper-button-next-custom'));
			mySwiper.$el[0].children[3].classList.add(cx('swiper-button-prev-custom'));
			mySwiper.update();
		}
	});

	return (
		<ReactIdswiper {...params}>
			{children}
		</ReactIdswiper>
	);
});

I don't have so much time to investigate more, but let me know if it helps you (try to implement the part with the pagination class maybe...), or if you didn't manage to do it. If you still need help, I'll take more time to elaborate a fresh and clean sandbox.

Best, Camille

[kamol-ayyub]

I have this issue wirh safari. What did you do for safari browser?