Swiper thumbnail navigation do not work in build mode work in dev mode react next js application

Question

in local mode swiper thumbnail navigation work but in build mode initial slide is not set active and thumbnail navigation do not work but its work through arrow click . in local its work through thumb nail and arrow both navigation its React next js application it work in yarn dev but when i make build it do not work

import 'swiper/css'; // also tried import "swiper/swiper.min.css";
export { Navigation, Thumbs, Pagination, Autoplay, Grid } from 'swiper';
export { Swiper, SwiperSlide } from 'swiper/react';
export type { SwiperOptions } from 'swiper';


import {
  Navigation,
  Swiper,
  SwiperOptions,
  SwiperSlide,
  Thumbs,
} from '@/components/ui/carousel/Sliders'
import { productGalleryPlaceholder } from '@/public/assets/placeholders'
import { getDirection } from '@/utils/getDirection'
import cn from 'classnames'
import { Attachment } from 'lib/types/products'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { useRef, useState } from 'react'
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io'
import Scrollbar from '../Scrollbar'

interface Props {
  gallery: Attachment[]
  thumbnailClassName?: string
  galleryClassName?: string
}

// product gallery breakpoints
const galleryCarouselBreakpoints = {
  '0': {
    slidesPerView: 4,
  },
}

const swiperParams: SwiperOptions = {
  slidesPerView: 1,
  spaceBetween: 0,
}

const ThumbnailCarousel: React.FC<Props> = ({
  gallery,
  thumbnailClassName = 'xl:w-[480px] 2xl:w-[650px]',
  // galleryClassName = 'xl:w-28 2xl:w-[130px]',
  galleryClassName,
}) => {
  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null)
  const prevRef = useRef<HTMLDivElement>(null)
  const nextRef = useRef<HTMLDivElement>(null)
  const { locale } = useRouter()
  const dir = getDirection(locale)

  return (
    <div className="w-full xl:flex xl:flex-row-reverse">
      <div
        className={cn(
          'relative mb-2.5 w-full overflow-hidden rounded-md border border-border-base md:mb-3 xl:ltr:ml-5 xl:rtl:mr-5',
          thumbnailClassName
        )}
      >
        {!!thumbsSwiper ? (
          <Swiper
            id="productGallery"
            thumbs={{ swiper: thumbsSwiper }}
            modules={[Navigation, Thumbs]}
            navigation={{
              prevEl: prevRef.current!, // Assert non-null
              nextEl: nextRef.current!, // Assert non-null
            }}
            {...swiperParams}
          >
            {gallery?.map((item) => (
              <SwiperSlide
                key={`product-gallery-${item.id}`}
                className="flex items-center justify-center"
              >
                <Image
                  src={item?.original ?? productGalleryPlaceholder}
                  alt={`Product gallery ${item.id}`}
                  // width={650}
                  // height={590}
                  width={540}
                  height={440}
                  className="rounded-lg object-contain"
                />
              </SwiperSlide>
            ))}
          </Swiper>
        ) : (
          <Swiper
            id="productGallery"
            modules={[Navigation, Thumbs]}
            navigation={{
              prevEl: prevRef.current!, // Assert non-null
              nextEl: nextRef.current!, // Assert non-null
            }}
            {...swiperParams}
          >
            {gallery?.map((item) => (
              <SwiperSlide
                key={`product-gallery-${item.id}`}
                className="flex items-center justify-center"
              >
                <Image
                  src={item?.original ?? productGalleryPlaceholder}
                  alt={`Product gallery ${item.id}`}
                  width={540}
                  height={440}
                  className="rounded-lg object-contain"
                />
              </SwiperSlide>
            ))}
          </Swiper>
        )}
        <div className="absolute top-2/4 z-10 flex w-full items-center justify-between px-2.5">
          <div
            ref={prevRef}
            className="flex h-7 w-7 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full bg-brand-light text-base shadow-navigation transition duration-300 hover:bg-brand hover:text-brand-light focus:outline-none md:h-8 md:w-8 lg:h-9 lg:w-9 lg:text-lg xl:h-10 xl:w-10 xl:text-xl"
          >
            {dir === 'rtl' ? <IoIosArrowForward /> : <IoIosArrowBack />}
          </div>
          <div
            ref={nextRef}
            className="flex h-7 w-7 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full bg-brand-light text-base shadow-navigation transition duration-300 hover:bg-brand hover:text-brand-light focus:outline-none md:h-8 md:w-8 lg:h-9 lg:w-9 lg:text-lg xl:h-10 xl:w-10 xl:text-xl"
          >
            {dir === 'rtl' ? <IoIosArrowBack /> : <IoIosArrowForward />}
          </div>
        </div>
      </div>
      {/* End of product main slider */}

      <Scrollbar
        options={{
          overflow: { y: 'scroll' },
          scrollbars: {
            visibility: 'visible',
          },
        }}
      >
        <div className={`shrink-0 ${galleryClassName}`}>
          <Swiper
            id="productGalleryThumbs"
            modules={[Navigation, Thumbs]}
            onSwiper={setThumbsSwiper}
            spaceBetween={0}
            watchSlidesProgress
            freeMode
            observer
            observeParents
            breakpoints={galleryCarouselBreakpoints}
          >
            {gallery?.map((item) => (
              <SwiperSlide
                key={`product-thumb-gallery-${item.id}`}
                className="flex cursor-pointer items-center justify-center overflow-hidden rounded border border-border-base transition hover:opacity-75"
              >
                <Image
                  src={item?.thumbnail ?? productGalleryPlaceholder}
                  alt={`Product thumb gallery ${item.id}`}
                  // width={170}
                  // height={170}
                  width={70}
                  height={70}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </Scrollbar>
    </div>
  )
}

export default ThumbnailCarousel

it should work in build mode as well as it working dev mode

Answer 1

I was having this problem also. What I did was:

1. Import the FreeMode module and add it to the modules parameter on the Swiper object for thumbnails, i.e.:

   import { Navigation, Thumbs, FreeMode } from "swiper/modules";
   
   <Swiper
     onSwiper={setActiveThumbnail}
     loop={true}
     spaceBetween={10}
     modules={[FreeMode, Navigation, Thumbs]}
     slidesPerView={4}
     className="mt-[-20px]"
   >
   

2. On the main Swiper object, change your thumbs to thumbs={{ swiper: activeThumbnail }}, i.e.

   <Swiper
     loop={true}
     spaceBetween={10}
     modules={[Navigation, Thumbs]}
     thumbs={{ swiper: activeThumbnail }}
     grabCursor={true}
   >