[React] 이미지, 글씨 슬라이드 / Carouselstrap

이미지나 글씨를 배너처럼 만들어 슬라이드로 넘기는 형식의 Carouselstrap

 

[Carouselstrap.js]

import {UncontrolledCarousel} from 'reactstrap';

function CarouselStrap(){
    const items = [ // (1)
        {
            src:'logo192.png',
            altText:'로고',
            caption:'logo',
            header:'logo'
        },
        {
            src:'logo512.png',
            altText:'로고2',
            caption:'logo2',
            header:'logo2'
        },
        {
            src:'logo192.png',
            altText:'로고3',
            caption:'logo3',
            header:'logo3'
        }
    ]
    return(
        <>  // (2)
            <UncontrolledCarousel items={items}/> 
        </>
    )
}

export default CarouselStrap;

(1) 슬라이드로 넘길 데이터의 객체를 생성

(2) 슬라이드로 만들고자 하는 객체를 items={데이터}의 형태로 넣어줌

- Uncontolled : 자동으로 슬라이드 넘어가며, 버튼 클릭 시 수동도 가능

- 수동을 원할 경우 Carousel만 작성