import React, { useState } from "react";
import { Carousel } from 'antd';
import '../asstes/css/Example.css'
import Carousel1 from '../asstes/img/CocoPi/初级1.png';
import Carousel2 from '../asstes/img/CocoPi/初级2.png';
import Carousel3 from '../asstes/img/CocoPi/中级1.png';
import Carousel4 from '../asstes/img/CocoPi/中级2.png';
import Carousel5 from '../asstes/img/CocoPi/高级1.png';
import Carousel6 from '../asstes/img/CocoPi/高级2.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} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel2} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel3} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel4} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel5} alt="即將上綫" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel6} alt="即將上綫" />
                    </div>
                </Carousel>
            </div>
        </div>
    )
}

export default Example;