Client Loaded Swiper

LazyLoadedSwiperCarousel.jsx

import React from "react"
import { Swiper, SwiperSlide } from "swiper/react"
import useSWR from "swr"

const fetcher = (url) =>
  fetch(url, {
    headers: {
      Authorization: `Bearer YOUR_JWT_TOKEN`
    }
  }).then((res) => res.json())

function LazyLoadedSwiperCarousel() {
  const { data, error } = useSWR(
    "https://qa-neutron-api.paramount.tech/api/3.4/screen/...",
    fetcher
  )

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log("slide change")}
    >
      {data.map((item, index) => (
        <SwiperSlide key={index}>
          <img src={item.imageUrl} alt={item.description} loading="lazy" />
        </SwiperSlide>
      ))}
    </Swiper>
  )
}