sw-slider v1.0.3

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 를 사용해서 슬라이드의 크기를 변경할 수 있습니다.

옵션