在本地模式下,swiper缩略图导航工作,但在构建模式下,初始幻灯片未被设置为活动,缩略图导航不工作,但它通过箭头单击工作。在本地,它通过缩略图和箭头两者导航它的React下一个js应用程序,它在yarn dev中工作,但当我构建它时,它不工作
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
字符串
它应该在构建模式下工作,也应该在开发模式下工作
1条答案
按热度按时间kxe2p93d1#
我也有这个问题。我做的是:
1.导入
FreeMode
模块,并将其添加到缩略图Swiper
对象上的modules
参数中,即:字符串
1.在主
Swiper
对象上,将拇指更改为thumbs={{ swiper: activeThumbnail }}
,即型