首页 > 解决方案 > 刷卡器反应返回第一张幻灯片

问题描述

我是 swiper.js 的新手,我正在使用 react 我有一个垂直滑动器我想创建两个按钮第一个按钮单击转到顶部,第二个转到底部,我尝试初始状态并设置他的值单击按钮但没有任何效果 在此处输入图像描述

这是我的代码

export const ContactFrom = ({
    contactInfo,
    setContactInfo,
    setFormSubmited,
    typeId,
    slideNo,
    setCurrentSlide,
}) => {
    const [swiper, setSwiper] = useState(1);
    const [initialIstate, setinitialIstate] = useState(3);
    useEffect(() => {
        setCurrentSlide(swiper);
    }, [swiper]);

    return (
        <Container maxWidth={false} disableGutters>
            <Swiper
                direction={"vertical"}
                slidesPerView={1}
                spaceBetween={30}
                mousewheel={true}
                className="ContactForm"
                speed={1500}
                touchRatio={2}
                onSlideChange={(e) => setSwiper(e.activeIndex + 1)}
                initialSlide={initialIstate}
                followFinger={false}
            >
                <SwiperSlide>
                    <Storage
                        contactInfo={contactInfo}
                        setContactInfo={setContactInfo}
                        typeId={typeId}
                    />
                </SwiperSlide>
                <SwiperSlide>
                    <RequiredSize
                        contactInfo={contactInfo}
                        setContactInfo={setContactInfo}
                    />
                </SwiperSlide>
                <SwiperSlide>
                    <PromotionOffer
                        contactInfo={contactInfo}
                        setContactInfo={setContactInfo}
                    />
                </SwiperSlide>
                <SwiperSlide>
                    <Information
                        contactInfo={contactInfo}
                        setContactInfo={setContactInfo}
                    />
                </SwiperSlide>
                <SwiperSlide>
                    <MoreInfo
                        contactInfo={contactInfo}
                        setContactInfo={setContactInfo}
                        setFormSubmited={setFormSubmited}
                    />
                </SwiperSlide>
            
            </Swiper>
            <button onClick={()=>setinitialIstate(3)}>go to top</button>
        </Container>
    );

标签: swiper

解决方案


推荐阅读