2

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>
    )
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
vinender singh
  • 339
  • 1
  • 3
  • 8

1 Answers1

0

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.

vinay
  • 78
  • 4