import React, { useState } from "react";
import { Carousel } from 'antd';
import '../asstes/css/Example.css'
import Carousel1_1 from '../asstes/img/CocoPi2/卡片.png';
import Carousel1_2 from '../asstes/img/CocoPi2/卡片-1.png';
import Carousel1_3 from '../asstes/img/CocoPi2/卡片-2.png';
import Carousel1_4 from '../asstes/img/CocoPi2/卡片-3.png';
import Carousel1_5 from '../asstes/img/CocoPi2/卡片-12.png';
import Carousel1_6 from '../asstes/img/CocoPi2/卡片-14.png';
import Carousel1_7 from '../asstes/img/CocoPi2/卡片-13.png';
import Carousel1_8 from '../asstes/img/CocoPi2/卡片-15.png';
import Carousel2_1 from '../asstes/img/CocoPi2/卡片-4.png';
import Carousel2_2 from '../asstes/img/CocoPi2/卡片-6.png';
import Carousel2_3 from '../asstes/img/CocoPi2/卡片-5.png';
import Carousel2_4 from '../asstes/img/CocoPi2/卡片-7.png';
import Carousel2_5 from '../asstes/img/CocoPi2/卡片-16.png';
import Carousel2_6 from '../asstes/img/CocoPi2/卡片-18.png';
import Carousel2_7 from '../asstes/img/CocoPi2/卡片-17.png';
import Carousel2_8 from '../asstes/img/CocoPi2/卡片-19.png';
import Carousel3_1 from '../asstes/img/CocoPi2/卡片-8.png';
import Carousel3_2 from '../asstes/img/CocoPi2/卡片-10.png';
import Carousel3_3 from '../asstes/img/CocoPi2/卡片-9.png';
import Carousel3_4 from '../asstes/img/CocoPi2/卡片-11.png';
import Carousel3_5 from '../asstes/img/CocoPi2/卡片-20.png';
import Carousel3_6 from '../asstes/img/CocoPi2/卡片-22.png';
import Carousel3_7 from '../asstes/img/CocoPi2/卡片-21.png';
import Carousel3_8 from '../asstes/img/CocoPi2/卡片-23.png';


const carouselRef = React.createRef();
function Example() {
    const [state1, setState1] = useState(0);
    const onChange = (e) => {
        setState1(e)
    };
    // const switchClickState = (e) => {
    //     carouselRef.current.goTo(e);
    // }
    return (
        <div className="Example">
            <h1>課程案例</h1>
            <div className="Example_content">
                <Carousel infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
                    arrowOffset={16} arrowSize={16}>
                    <div className="contentStyle">
                        <img src={Carousel1_1} alt="即將上綫" />
                        <img src={Carousel1_3} alt="即將上綫" />
                        <img src={Carousel1_2} alt="即將上綫" />
                        <img src={Carousel1_4} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel1_5} alt="即將上綫" />
                        <img src={Carousel1_6} alt="即將上綫" />
                        <img src={Carousel1_7} alt="即將上綫" />
                        <img src={Carousel1_8} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel2_1} alt="即將上綫" />
                        <img src={Carousel2_2} alt="即將上綫" />
                        <img src={Carousel2_3} alt="即將上綫" />
                        <img src={Carousel2_4} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel2_5} alt="即將上綫" />
                        <img src={Carousel2_6} alt="即將上綫" />
                        <img src={Carousel2_7} alt="即將上綫" />
                        <img src={Carousel2_8} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel3_1} alt="即將上綫" />
                        <img src={Carousel3_2} alt="即將上綫" />
                        <img src={Carousel3_3} alt="即將上綫" />
                        <img src={Carousel3_4} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel3_5} alt="即將上綫" />
                        <img src={Carousel3_6} alt="即將上綫" />
                        <img src={Carousel3_7} alt="即將上綫" />
                        <img src={Carousel3_8} alt="即將上綫" />
                    </div>
                </Carousel>
            </div>
        </div>
    )
}

export default Example;