fix(thumb): active class gets removed

[ma-multipla]

The thumbs active class get's applied and removed right after when the thumbs slider slides the next group of thumbs into view. This only happens when using the library or framework components as those are emitting the _slideClass update event as part of sliding to the next thumbs group. At this time they do not yet contain the class information of the new active thumb, then the active thumbs class gets toggled via direct dom manipulation and afterwards the emitted events from before that where being queued are executed and remove the active class again. This PR prevents this behavior by toggling the thumb active classes before emitting the events.

Relates issues: #5501, #4748

[Chandra-Sekhar-Korni]

@nolimits4web I am using Swiper JS Slider, thumbs events for the slider, and I am displaying 30 Images in the navigation click. For the slide of images 1 and 3, it was 1st slide and the second slide and showed the third slide. what I need is if I click the third image the element has to be show 3rd and no other image has to slide. Thanks.

[acezd-finance]

i have similar issue swiper-slide-thumb-active is not applied in production build but work in local env
in production build it add swiper-slide-active
navigation from arrow work correctly but not from thumb nail.
in local env both work correctly
can any one help
i am using swiper version 8.4.5
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 = ({
gallery,
thumbnailClassName = 'xl:w-[480px] 2xl:w-[650px]',
// galleryClassName = 'xl:w-28 2xl:w-[130px]',
galleryClassName,
}) => {
const [thumbsSwiper, setThumbsSwiper] = useState(null)
const prevRef = useRef(null)
const nextRef = useRef(null)
const { locale } = useRouter()
const dir = getDirection(locale)

return (

<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"
/>

))}

) : (
<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"
/>

))}

)}

{dir === 'rtl' ? : }

{dir === 'rtl' ? : }

{/* 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={true}
        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

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