当前位置：首页 > React

react实现联动轮播

2026-01-27 18:10:37React

React 联动轮播实现方法

联动轮播通常指多个轮播组件之间相互关联，例如主轮播切换时缩略图轮播同步更新。以下是基于 React 和流行库的实现方案：

使用 react-slick 实现主轮播与缩略图联动

安装依赖：

npm install react-slick slick-carousel

主组件代码示例：

import React, { useState } from 'react';
import Slider from 'react-slick';

const LinkedCarousel = ({ images }) => {
  const [nav1, setNav1] = useState(null);
  const [nav2, setNav2] = useState(null);

  return (
    <div>
      {/* 主轮播 */}
      <Slider
        asNavFor={nav2}
        ref={(slider) => setNav1(slider)}
        arrows={false}
      >
        {images.map((img, i) => (
          <div key={`main-${i}`}>
            <img src={img} alt={`Slide ${i}`} />
          </div>
        ))}
      </Slider>

      {/* 缩略图轮播 */}
      <Slider
        asNavFor={nav1}
        ref={(slider) => setNav2(slider)}
        slidesToShow={3}
        focusOnSelect={true}
      >
        {images.map((img, i) => (
          <div key={`thumb-${i}`}>
            <img src={img} alt={`Thumb ${i}`} />
          </div>
        ))}
      </Slider>
    </div>
  );
};

自定义实现联动逻辑

对于不使用第三方库的情况，可通过状态管理实现联动：

const CustomLinkedCarousel = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleMainChange = (index) => {
    setActiveIndex(index);
  };

  const handleThumbClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <div>
      {/* 主轮播 */}
      <div className="main-carousel">
        {items.map((item, i) => (
          <div 
            key={i} 
            style={{ display: i === activeIndex ? 'block' : 'none' }}
          >
            {item.content}
          </div>
        ))}
      </div>

      {/* 缩略图导航 */}
      <div className="thumbnails">
        {items.map((item, i) => (
          <div 
            key={i}
            onClick={() => handleThumbClick(i)}
            className={i === activeIndex ? 'active' : ''}
          >
            <img src={item.thumb} alt={`Thumb ${i}`} />
          </div>
        ))}
      </div>
    </div>
  );
};

使用 Swiper 实现复杂联动

安装 Swiper React 组件：

npm install swiper

实现代码：

react实现联动轮播

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Thumbs } from 'swiper/modules';

const SwiperLinkedCarousel = ({ slides }) => {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <>
      <Swiper
        modules={[Navigation, Thumbs]}
        thumbs={{ swiper: thumbsSwiper }}
      >
        {slides.map((slide) => (
          <SwiperSlide key={slide.id}>
            <img src={slide.image} />
          </SwiperSlide>
        ))}
      </Swiper>

      <Swiper
        modules={[Thumbs]}
        onSwiper={setThumbsSwiper}
        spaceBetween={10}
        slidesPerView={4}
      >
        {slides.map((slide) => (
          <SwiperSlide key={slide.id}>
            <img src={slide.thumbnail} />
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
};