swiper.setProgress(progress, speed) is only applying to one of the slides in swiper js

[Trushar10]

The project has multiple swiper sliders on a different sections. The slides are triggered to start only when it comes in the viewport. To do that I have used javascript observer.

So, the issue is happening on the sliders of sections 5 and 6. swiper.setProgress(progress, speed) method to reset transition from 1st slide. It works on the section 5 slider but does not apply to the section 6 slider.

If I remove swiper5.setProgress(progress,speed). Section 6 slider will start when comes in viewport other wise it doesn't.

I have named each slider differently, such as .mySwiper5 and .mySwiper6 respective to section 5 and 6.

I think the script is conflicting with each other. What can be done to resolve it?

Project link : https://project-instock.netlify.app/

Here is a javascript observer code:

new fullScroll({
	mainElement: 'main',
	displayDots: false,
	dotsPosition: 'right',
	animateTime: 0.7,
	animateFunction: 'ease',
});

$('#nav-button').click(function () {
	$('.icon').toggleClass('close');
});

/*navbar*/
const navToggle = document.querySelector('#nav-button');
const menu = document.querySelector('.menu');

navToggle.addEventListener('click', function () {
	if (menu.classList.contains('hide')) {
		menu.classList.remove('hide');
	} else {
		menu.classList.add('hide');
	}
});

/*Section 1 slide*/
var swiper1 = new Swiper('.mySwiper1', {
	speed: 1000,
	effect: 'fade',
	fadeEffect: {
		crossFade: true,
	},
	centeredSlides: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	autoplay: {
		delay: 7000,
		disableOnInteraction: false,
	},
});

/*Section 5 slide*/
let swiper5 = new Swiper('.mySwiper5', {
	speed: 1000,
	effect: 'fade',
	fadeEffect: {
		crossFade: true,
	},
	centeredSlides: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	autoplay: {
		delay: 7000,
		disableOnInteraction: false,
	},
});

/*Section 6 slide*/
let swiper6 = new Swiper('.mySwiper6', {
	speed: 1000,
	effect: 'fade',
	fadeEffect: {
		crossFade: true,
	},
	centeredSlides: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
	autoplay: {
		delay: 7000,
		disableOnInteraction: false,
	},
});

const appearOptions1 = {
	threshold: 0,
	rootMargin: '0px 0px 0px 0px',
};

const appearOnScroll1 = new IntersectionObserver(function (
	entries,
	appearOnScroll1
) {
	entries.forEach((entry) => {
		if (!entry.isIntersecting) {
			return;
		} else {
			entry.target.classList.add('appear');
			appearOnScroll1.unobserve(entry.target);

			if (window.innerHeight > window.innerWidth) {
				if (
					/Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(
						navigator.userAgent
					)
				) {
					$(document).ready(function () {
						$('.progress .p1').attr('aria-valuenow', '20');

						$('.progress .p2').attr('aria-valuenow', '62');

						$('.progress .p1').css('width', function () {
							return $(this).attr('aria-valuenow') + '%';
						});

						$('.progress .p2').css('width', function () {
							return $(this).attr('aria-valuenow') + '%';
						});
					});
				}
			} else {
				$(document).ready(function () {
					$('.progress .progress-bar').css('width', function () {
						return $(this).attr('aria-valuenow') + '%';
					});
				});
			}

			swiper5.setProgress(0, 1000);
			swiper6.setProgress(0, 1000);
		}
	});
},
appearOptions1);

bar.forEach((pbar) => {
	appearOnScroll1.observe(pbar);
});

function changeText(text) {
	var display = document.getElementById('text-display');
	display.innerHTML = '';
	display.innerHTML = text;
}

function defaultText() {
	var display = document.getElementById('text-display');
	display.innerHTML = '';
	display.innerHTML =
		'<h2>' +
		'Compare prices' +
		'<br/>' +
		'with ease' +
		'</h2>' +
		'<p>' +
		'Get the best deals for your daily needs.' +
		'</p>';
}