Sw-Slider

사용 기술

• React
• Typescript
• SCSS
  • 변수 사용으로 코드 중복 최소화
  • 코드 간략화

시작하기

설치

$ npm i sw-slider

패키지 가져오기

import { SliderContainer, SliderItem } from 'sw-slider';

export default () => {
    return (
        <SliderContainer autoPlay={true} delay={3000} speed={300} pagination={true} arrow={true}>
            <SliderItem>Slide 1</SliderItem>
            <SliderItem>Slide 2</SliderItem>
            <SliderItem>Slide 3</SliderItem>
            <SliderItem>Slide 4</SliderItem>
            ...
        </SliderContainer>
    );
};

구조

<!-- Slider wrap -->
<div id="sw-slider-wrap">
    <!-- Slider container -->
    <div id="sw-slider-container">
        <!-- Slides -->
        <div class="sw-slider-item">Slide 1</div>
        <div class="sw-slider-item">Slide 2</div>
        <div class="sw-slider-item">Slide 3</div>
        ...
    </div>

    <!-- Slider arrow button -->
    <div id="sw-slider-arrow-box">
        <span class="sw-slider-arrow-prev"></span>
        <span class="sw-slider-arrow-next"></span>
    </div>

    <!-- Slider pagination -->
    <ul id="sw-slider-pagination"></ul>
</div>

커스텀 스타일

#sw-slider-wrap {
    width: 500px;
    height: 300px;
}

• css 를 사용해서 슬라이드의 크기를 변경할 수 있습니다.

옵션

| Option | Type | Default | Description | | ---------- | ------- | ------- | -------------------------------------------------- | | autoPlay | boolean | true | 자동 슬라이드 옵션 사용 여부 | | delay | number | 3000 | autoPlay: true 인 경우 자동 슬라이드 속도값 설정 | | speed | number | 400 | 슬라이드 트랜지션 속도 | | pagination | boolean | true | pagination 사용 여부 | | arrow | boolean | true | arrow 사용 여부 |