[리액트 React] 실무에서 유용하게 사용되는 실무에서 유용하게 사용되는 reactstrap Carousel (슬라이드)

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 reactstrap의 Carousel에 대해 다뤄볼게요.

지금부터는 가독성을 위해 문어체를 사용하겠습니다.

 

✋🏼 잠깐만! 이 글을 보기 전에, reactstrap 설치는 했나요?

아니라면 해당 링크를 눌러 reactstrap을 설치하기

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유

 

 

1. App.js 작성하기

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from './Carousel';

function App() {
	return(
		<div>
			<Carousel />
		</div>
	)
}

export default App;

 

 

2. Carousel.js 작성하기

import React from 'react';
import { UncontrolledCarousel } from 'reactstrap';
import slide1 from './slide1.png';
import slide2 from './slide2.png';
import slide3 from './slide3.png';
import slide4 from './slide4.png';

const items = [
    {
        src: slide1,
        altText: '슬라이드1',
        caption: '슬라이드1 설명',
        header: '슬라이드1 제목'
    },
    {
        src: slide2,
        altText: '슬라이드2',
        caption: '슬라이드2 설명',
        header: '슬라이드2 제목'
    },
    {
        src: slide3,
        altText: '슬라이드3',
        caption: '슬라이드3 설명',
        header: '슬라이드3 제목'
    },{
        src: slide4,
        altText: '슬라이드4',
        caption: '슬라이드3 설명',
        header: '슬라이드3 제목'
    }
];

function Carousel() {
    return (
        <UncontrolledCarousel items={items}"/>
    )
}

export default Carousel;

 

3. 브라우저 확인

Previous 와 Next 버튼으로 좌우로 이미지를 슬라이드 할 수 있으며,
버튼을 누르지 않더라도 일정한 가격으로 슬라이드가 진행된다.

 

 

4. 출처 및 추가내용

해당 링크를 들어가면 reactstrap Carousel의 다양한 예제를 확인할 수 있다.
더불어, 정말 정말 실무에서 많이 사용되는 부분이니 많이 연습하자.

reactstrap - Carousel