department-web/src/pages/Home.js

import React, { useEffect, useState } from 'react';
import './Home.css';

const slidesData = [
  {
    id: 1,
    title: '行业资讯：新机型发布',
    description: '最新机型亮相航空展，性能全面升级',
    image: 'http://localhost:3001/uploads/home_1.png'
  },
  {
    id: 2,
    title: '解决方案：资料管理优化',
    description: '一体化资料管理平台上线，提效30%',
    image: 'http://localhost:3001/uploads/home_2.jpg'
  },
  {
    id: 3,
    title: '产品更新：PDF在线预览',
    description: '新增在线预览与多端适配功能',
    image: 'http://localhost:3001/uploads/home_3.jpg'
  },
  {
    id: 4,
    title: '客户案例：数字化转型',
    description: '多行业落地实践，推动数据驱动决策',
    image: 'http://localhost:3001/uploads/home_4.jpg'
  }
];

const Home = () => {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setActive((prev) => (prev + 1) % slidesData.length);
    }, 4000);
    return () => clearInterval(timer);
  }, []);

  const prevSlide = () => {
    setActive((prev) => (prev - 1 + slidesData.length) % slidesData.length);
  };

  const nextSlide = () => {
    setActive((prev) => (prev + 1) % slidesData.length);
  };

  return (
    <div className="home-page">
      

      <div className="carousel-full">
        <button className="arrow left" onClick={prevSlide}>‹</button>

        <div className="slides">
          {slidesData.map((s, idx) => (
            <div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
              <img className="slide-img" src={s.image} alt={s.title} loading="lazy" />
              <div className="caption">
                <h3>{s.title}</h3>
                <p>{s.description}</p>
              </div>
            </div>
          ))}
        </div>

        <button className="arrow right" onClick={nextSlide}>›</button>

        <div className="indicators">
          {slidesData.map((_, idx) => (
            <span
              key={idx}
              className={`dot ${idx === active ? 'active' : ''}`}
              onClick={() => setActive(idx)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Home;