为什么我的 react-swiper 组件会在单击按钮时滑动？

Question

我在另一个 FlashDealsProducts.js 文件中重复使用了 promotion-slider.js 刷卡代码一些变化，但没有任何错误，当我点击时，两个组件都向同一方向滑动任一个滑动按钮。我尝试更改 id 但没有用。删除了两个文件的虚拟数据

促销-Slider.js文件

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 文件

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>
    )
}

Answer 1

检查，两个文件中导航对象的两个值相同。为每个滑动器分配不同的值给 prevEl 和 nextEl 属性您在项目中使用的组件。

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

在你的项目中使用了两个 swiper 组件，否则你必须分配每个滑动组件中导航属性的不同值。请确保将其替换为下面类中的新值。

为什么我的 react-swiper 组件会在单击按钮时滑动？

Why are my react-swiper components swiping on button click?

reactjs

next.js

react-swiper