滑动缩略图导航在构建模式下不起作用在开发模式下工作反应下一个js应用程序

Question

在本地模式下滑动缩略图导航可以工作，但在构建模式下初始幻灯片未设置为活动状态 和缩略图导航不起作用，但它通过箭头单击起作用。 在本地，它的工作通过缩略图和箭头导航 它的 React next js 应用程序 它在纱线开发中工作，但是当我构建时它不起作用

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

它应该在构建模式下工作以及在开发模式下工作

Answer 1

我也遇到这个问题了。我所做的是，

导入 Freemodes 模块并将其添加到缩略图 Swiper 对象上的模块参数中 即

从“swiper/modules”导入 { Navigation, Thumbs, FreeMode }；

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

然后在主滑动对象上，将拇指更改为 拇指={{ swiper: activeThumbnail }}

即

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

试试这个，这对我有用，所以我希望它对你有用