Initializing Swiper carousels on demand

swiper-lazy-init.js

FIRST = 10
swipers = [] // array aligned with cards, or WeakMap

io = new IntersectionObserver((entries) => {
  for (entry of entries) {
    if (!entry.isIntersecting) continue

    card = entry.target
    io.unobserve(card)

    swiper = swipers.get(card)
    if (!swiper.initialized) swiper.init()
  }
}, { threshold: 0, rootMargin: "0px 0px 50% 0px" })


for each cardEl with index i:
  container = cardEl.querySelector(".swiper")

  swiper = new Swiper(container, {
    init: i < FIRST,     // true for first 10, false for rest
    loop: false,
    slidesPerView: 1,
  })

  swipers.set(cardEl, swiper)

  if (i >= FIRST):
    io.observe(cardEl)