使用AliceCarousel开发加密货币趋势轮播图遇问题，求修复

问题分析 #

你当前的核心错误是将AliceCarousel组件放在了map循环内部，导致每一个加密货币项都生成了独立的轮播容器，而非所有项在同一个轮播中滚动。

修复方案 #

将AliceCarousel作为外层容器，map循环仅负责生成轮播内的单个滑动项，同时补充必要的样式导入：

import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import { Link } from 'react-router-dom';
import UseAxios from '../hooks/UseAxios'
import "./Trending.css";
// 必须导入官方样式，否则布局会错乱
import 'react-alice-carousel/lib/alice-carousel.css';

const Trending = () => {
  const { response } = UseAxios("search/trending");

  return (
    <div className='trending-carousel-wrapper'>
      <AliceCarousel
        mouseTracking
        infinite
        autoPlayInterval={1000}
        animationDuration={1500}
        disableButtonsControls
        autoPlay
      >
        {response?.coins?.map(coin => (
          <Link to={`/coin/${coin.item.id}`} key={coin.item.coin_id} className='slide'>
            <div className='flex flex-col items-center'>
              <img src={coin.item.large} className="img" />
              <p className="name">{coin.item.name}</p>
            </div>
          </Link>
        ))}
      </AliceCarousel>
    </div>
  )
}

export default Trending;

关键注意点 #

• 样式导入：务必添加react-alice-carousel/lib/alice-carousel.css，否则轮播的基础布局会失效
• 结构调整：轮播容器仅需一个，所有滑动项作为其子元素存在
• 样式适配：调整.slide、.img等自定义CSS类，确保每个轮播项的尺寸统一，避免滚动时布局跳动
• 可选优化：可以通过AliceCarousel的items属性传入轮播项数组，写法更简洁：

  <AliceCarousel
    // 其他属性...
    items={response?.coins?.map(coin => (
      <Link to={`/coin/${coin.item.id}`} key={coin.item.coin_id} className='slide'>
        <div className='flex flex-col items-center'>
          <img src={coin.item.large} className="img" />
          <p className="name">{coin.item.name}</p>
        </div>
      </Link>
    ))}
  />
  

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