Load swiper slides lazyload (with <noscript> tag) for each slide

slider.js

import { select, selectAll, hasClass, removeClass, loadNoscriptContent } from 'lib/dom'
import Swiper, { Navigation } from 'swiper'

export default el => {
	const sliderEl = select('.js-slider', el)
	const slideEls = selectAll('.swiper-slide', el)

	if (sliderEl) {
		const swiper = new Swiper(sliderEl, {
			freeMode: true,
			loop: true,
			modules: [Navigation],
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
			slidesPerView: 'auto',
			spaceBetween: 10,
			speed: 600,
			autoplay: {
				delay: 5000
			}
		})

		swiper.navigation.init()

		swiper.on('activeIndexChange', (swiper) => {
			const activeIndex = swiper.realIndex
			const activeSlideEl = slideEls[activeIndex]

			if (hasClass('is-not-loaded', activeSlideEl)) {
				loadNoscriptContent(activeSlideEl)
			}
		})
	}
}

slider.php

<div class="swiper js-slider">
  <div class="mhs-hero-slider__content swiper-wrapper">
      <?php foreach($images as $index => $slide) :
					$item_class = 'swiper-slide mhs-hero-slider__item';
					$is_lazy_load = false;

					if ($index > 0) {
						$item_class .= ' is-not-loaded';
						$is_lazy_load = true;
					}
					?>
					<div class="<?php echo esc_attr( $item_class ); ?>">
						<?php if ($is_lazy_load) : ?><noscript><?php endif; ?>
						<picture class="image image--default mhs-hero-slider__image">
							<?php echo wp_get_attachment_image(
								$slide['image'],
								'large',
								false,
								array(
									'class' => 'wp-post-image image__img'
								)
							); ?>
						</picture>
						<?php if ($is_lazy_load) : ?></noscript><?php endif; ?>
					</div>
      <?php endforeach; ?>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>