React Card Carousel关闭自动播放及实现手动切换方法求助

要实现关闭自动播放和手动切换卡片功能，你可以通过React状态管理和组件Ref来操作ReactCardCarousel的内置能力，以下是修改后的完整代码：

修改后的ImageSlider组件 #

import { useState, useRef } from 'react';
import ReactCardCarousel from 'react-card-carousel';
import NavB from './NavB';
import Candidate from './Candidate';

const candidates = [
    {img: Verde, semestre: 'Formula presi/vice', names: 'P1 y P2', description: 'Hola somos ...'},
    {img: Verde, semestre: 'Primer Semestre', names: 'S1', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Segundo Semestre', names: 'S2', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Tercer Semestre', names: 'S3', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Cuarto Semestre', names: 'S4', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Quinto Semestre', names: 'S5', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Sexto Semestre', names: 'S6', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Septimo Semestre', names: 'S7', description: 'Hola soy ...'},
    {img: Verde, semestre: 'Octavo Semestre', names: 'S8', description: 'Hola soy ...'}
];

const ImageSlider = () => {
    // 状态控制自动播放开关
    const [isAutoplay, setIsAutoplay] = useState(true);
    // 创建Ref获取轮播组件实例
    const carouselRef = useRef(null);

    // 手动切换上一张
    const handlePrev = () => {
        carouselRef.current?.goPrev();
    };

    // 手动切换下一张
    const handleNext = () => {
        carouselRef.current?.goNext();
    };

    // 切换自动播放状态
    const toggleAutoplay = () => {
        setIsAutoplay(!isAutoplay);
    };

    return(
        <>
            <NavB />
            {/* 控制按钮区域 */}
            <div style={{margin: '20px 0', display: 'flex', gap: '10px', justifyContent: 'center'}}>
                <button onClick={handlePrev}>上一张</button>
                <button onClick={toggleAutoplay}>
                    {isAutoplay ? '暂停自动播放' : '开启自动播放'}
                </button>
                <button onClick={handleNext}>下一张</button>
            </div>
            {/* 挂载Ref并绑定autoplay状态 */}
            <ReactCardCarousel 
                ref={carouselRef}
                autoplay={isAutoplay} 
                autoplay_speed={4500}
            >
                 {candidates.map((slide, index)=>{
                    return(
                    <div key={index}>
                        <Candidate data={slide} />
                    </div>)
                })}
            </ReactCardCarousel>
        </>
    )
}

export default ImageSlider;

关键改动说明 #

• 自动播放控制：通过useState创建isAutoplay状态，将其绑定到轮播组件的autoplay属性，点击按钮即可切换自动播放的启停状态。
• 手动切换实现：用useRef获取轮播组件实例，调用组件内置的goPrev()和goNext()方法，实现手动切换上下卡片。
• 给列表渲染的卡片添加key属性，符合React列表渲染规范，避免控制台警告。

Candidate组件无需修改，保持你原有的代码即可。

内容的提问来源于stack exchange，提问作者andres florian