I reused the promotion-slider.js swiper code in another FlashDealsProducts.js file with
some changes but without any error both components slides in same direction when I click
either of the slide button. I tried changing the id but it didn't worked.
Deleted dummy data of both file
Promotion-Slider.js file
import { ArrowNext, ArrowPrev } from "@components/icons";
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.css";
const offerSliderBreakpoints = {
320: {
slidesPerView: 1,
spaceBetween: 0,
},
580: {
slidesPerView: 2,
spaceBetween: 16,
},
1024: {
slidesPerView: 3,
spaceBetween: 16,
},
1920: {
slidesPerView: 4,
spaceBetween: 24,
},
};
SwiperCore.use([Navigation]);
export default function PromotionSlider() {
return (
<div className="px-6 py-5 md:px-8 xl:px-12 md:py-10 border-t border-gray-200">
<div className="relative">
<Swiper
// id="offer"
loop={true}
breakpoints={offerSliderBreakpoints}
navigation={{
nextEl: ".next",
prevEl: ".prev",
}}
>
{data?.map((d) => (
<SwiperSlide key={d.id}>
<img
className="w-full h-auto"
src={d.bannerUrl}
alt={d.title}
width="430"
height="200"
/>
</SwiperSlide>
))}
</Swiper>
<div
className="prev cursor-pointer absolute top-2/4 -left-4 md:-left-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary"
role="button"
>
<span className="sr-only">previous</span>
<ArrowPrev width={18} height={18} />
</div>
<div
className="next cursor-pointer absolute top-2/4 -right-4 md:-right-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary"
role="button"
>
<span className="sr-only">next</span>
<ArrowNext width={18} height={18} />
</div>
</div>
</div>
);
}
FlashDealsProducts.js file
import Products from './Products.js';
import ProductCard from './ProductCard.js';
import { ArrowNext, ArrowPrev } from "@components/icons";
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.css";
const SliderBreakpoints = {
320: {
slidesPerView: 1,
spaceBetween: 0,
},
580: {
slidesPerView: 2,
spaceBetween: 16,
},
1024: {
slidesPerView: 3,
spaceBetween: 16,
},
1920: {
slidesPerView: 4,
spaceBetween: 24,
},
};
SwiperCore.use([Navigation]);
export default function FlashDealProducts() {
return (
<div className='flex mt-14 flex-col'>
<div className='flex pl-1 flex-nowrap bg-white p-4'>
<h2 className=' flex-nowrap ml-7 font-bold text-lg'> Flash Deals </h2>
<span className='text-sm ml-20 font-light text-gray-800 '> Ends in </span>
<span className='px-1 ml-4 bg-red-700 text-white font-medium'> 10 hours</span>
</div>
<div className="px-6 py-5 md:px-8 xl:px-12 md:py-10 border-t bg-white border-gray-200">
<div className="relative">
<Swiper
id="flash-deals"
loop={true}
breakpoints={SliderBreakpoints}
navigation={{
nextEl: ".next",
prevEl: ".prev",
}}
>
{Products?.map((d) => (
<SwiperSlide key={d.id}>
<ProductCard key={d.id}
title={d.title}
image={d.image}
basePrice={d.basePrice}
flashHeight={200}
flashWidth={200}
discount={d.discount}
currentPrice={d.currentPrice} />
</SwiperSlide>
))}
</Swiper>
<div
className="prev cursor-pointer absolute top-2/4 -left-4 md:-left-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary"
role="button"
>
<span className="sr-only">previous</span>
<ArrowPrev width={18} height={18} />
</div>
<div
className="next cursor-pointer absolute top-2/4 -right-4 md:-right-5 z-10 -mt-4 md:-mt-5 w-8 h-8 md:w-9 md:h-9 rounded-full bg-white shadow-xl border border-gray-200 border-opacity-70 flex items-center justify-center text-gray-800 transition-all duration-200 hover:bg-primary hover:text-white hover:border-primary"
role="button"
>
<span className="sr-only">next</span>
<ArrowNext width={18} height={18} />
</div>
</div>
</div>
{/* </div> */}
</div>
)
}
Check, both values of navigation object in both files are same. Assign different values to prevEl and nextEl property for every swiper component you use in your project.
navigation={{
nextEl: ".next", // both should be unique in every swiper
// component
prevEl: ".prev",
}}
Either you change both values or one of them in your file only if you
are using two swiper component in your project else you have to assign different values to navigation property in every swiper component. Make sure to replace it with new value in classes below.