Как добавить класс к пагинации после просмотра слайда?

Question

[Павел Сидоров]

Как добавить класс к пагинации после просмотра слайда?

const myCustomSlider = document.querySelectorAll('.js-swiper-pagination-progress-with-thumbs-main');
	for( i=0; i< myCustomSlider.length; i++ ) {
	  
		myCustomSlider[i].classList.add('js-swiper-pagination-progress-with-thumbs-main-' + i);

		var galleryTop2 = new Swiper('.js-swiper-pagination-progress-with-thumbs-main-' + i, {
			grabCursor: false,
			direction: 'horizontal',
			//effect: 'fade',
			loop: false,
			hashNavigation: true,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
				stopOnLastSlide: true,
			},
			navigation: {
				nextEl: '.stories-slider-button-next',
				prevEl: '.stories-slider-button-prev',
			},
			watchSlidesVisibility: true,
			watchSlidesProgress: true,
			history: false,
			/*thumbs: {
				swiper: paginationProgressWithThumbsThumbs3
			},
			stories-slider-pagination-bullet-viewed
			*/
			pagination: {
				el: '.stories-slider-pagination',
				bulletClass: 'swiper-pagination-bullet-custom',
				bulletActiveClass: 'swiper-pagination-bullet-custom--active',
				renderBullet: function(index, className) {
					return `<div class="stories-slider-pagination-bullet" data-index="${index}">
					<span class="${className}"></span>
				  </div>`
				},
			},
			on: {
				init: function () {
					const _self = this;
	
					let videos = document.querySelector(".mainscreen__video");
					videos.currentTime = 0;
	
					_self.el.style.setProperty('--delay', _self.params.autoplay.delay);
				},
			},
		});
		galleryTop2.on('slideChange', function () {
			console.log('slide changed'); 
			let videos = document.querySelector(".mainscreen__video");
			videos.currentTime = 0; 
		});
	}

Исходя из кода выше, у меня в html структуре получается следующий вид:

<!--PAGINATION-->
<div class="stories-slider-pagination">
      <div class="stories-slider-pagination-bullet stories-slider-pagination-bullet-viewed" data-index="${index}">
             <span class="${className}"></span>
      </div>
<!--ТЕКУЩИЙ АКТИВНЫЙ СЛАЙДЕР, ЗНАЧИТ У ПРЕДЫДУЩЕГО ДОБАВЛЯЕМ stories-slider-pagination-bullet-viewed-->
      <div class="stories-slider-pagination-bullet" data-index="${index}">
             <span class="${className}"></span>
      </div>
      <div class="stories-slider-pagination-bullet" data-index="${index}">
             <span class="${className}"></span>
      </div>
</div>

Answer 1

[Загир Меджидов]

Попробуйте мой код:

on: {
    slideChange: function() {
     // тут добавляете уже класс
    },
  },