REACT_reactstrap Carousel

Carousel 패키지는 슬라이드를 자동으로 회전시키는 기능을 제공한다

이미지 텍스트, 버튼 등으로 이루어진 슬라이드를 일정 시간 단위로 다음 슬라이드를 이동시킨다

한 슬라이드에 머무는 시간은 기본값 5초가 적용된다

웹 브라우저의 가로 너비가 특정 값보다 작으면, 슬라이드 제목과 설명 부분이 표시되지 않을 수 있다

 

UncontrolledCarousel :  태그나 함수를 생략해도 기본 기능을 제공해준다

기본적인 기능만 사용할 것이라면 Carousel보다 UncontrolledCarousel을 사용하는 것이 간편하다

- R041_ReactstrapCarousel.js

import React, { Component } from 'react';
import { UncontrolledCarousel } from 'reactstrap';

const items = [
    {
        src: 'https://han.gl/q6jDb',
        altText: '슬라이드1 이미지 대체 문구',
        caption: '슬라이드1 설명',
        header: '슬라이드1 제목',
    },
    {
        src: 'https://han.gl/d4jbj',
        altText: '슬라이드2 이미지 대체 문구',
        caption: '슬라이드2 설명',
        header: '슬라이드2 제목',
    },
    {
        src: 'https://han.gl/U7FFH',
        altText: '슬라이드3 이미지 대체 문구',
        caption: '슬라이드3 설명',
        header: '슬라이드3 제목',
    }
];

class R041_ReactstrapCarousel extends Component {
    render() {
        return (
            <UncontrolledCarousel items={items}/>
        )}
}
export default R041_ReactstrapCarousel;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapCarousel from './R041_ReactstrapCarousel'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapCarousel/>
    </div>
  );
}

export default App;

 

결과

슬라이드가 5초 간격으로 자동으로 넘어간다