SPSTRAP Document API

Slider Type

Default

Fade

Scrollbar

Navigation

Pagination-dynamic-bullets

Progress-pagination

Fraction-pagination

Custom-pagination

<!--
                                커스텀 페이지는 아래의 마크업 구조를 가진다.
                                두개의 클래스만 관리하면 된다.
                                .swiper-pagination-bullet-customize // 커스텀 버튼
                                .swiper-pagination-bullet-active // 커스텀 액티브 버튼

* custum="" 부분을 삭제하고, 개인적인 코드를 삽입해서 디자인을 보완할 수 있다.
                            -->
                            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                                <span class="swiper-pagination-bullet swiper-pagination-bullet-customize" tabindex="0">1</span>
                                <span class="swiper-pagination-bullet [swiper-pagination-bullet-customize swiper-pagination-bullet-active]" tabindex="0">2</span>
                                <span class="swiper-pagination-bullet swiper-pagination-bullet-customize" tabindex="0">3</span>
                            </div>

Vertical-slider

<div class="swiper-container sp--css-notready"
                                data-type="vertical-slider"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 3000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/2000x400/f5f5f5/333333/1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/2000x400/f5f5f5/333333/2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/2000x400/f5f5f5/333333/3"></div>
                                </div>
                            </div>

Vertical-slider - rows

Multiple-slides-per-view

Centered-slides

Centered-slides-auto-slides-per-view

Multi-row-slides-layout

<div class="swiper-container sp--css-notready"
                                data-type="multi-row-slides-layout"
                                data-swiper="
                                    slidesPerView = 4
                                    slidesPerColumn = 2
                                    slidesPerGroup = 1
                                    spaceBetween = 50
                                    autoplay-delay = 1000000
                                "
                            >
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div>
                                            <img src="https://placeholder.pics/svg/500x300/1">
                                            <p>
                                                gkgkgkgk<br />
                                                하하하하하<br />
                                                5,000원
                                            </p>
                                        </div>
                                    </div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=3"></div>
                                    <div class="swiper-slide">
                                        <div>
                                            <img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=4">
                                            <p>
                                                gkgkgkgk<br />
                                                하하하하하<br />
                                                5,000원
                                            </p>
                                        </div>
                                    </div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=5"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=6"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=7"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=8"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/f5f5f5/333&text=9"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/10"></div>
                                    <div class="swiper-slide">
                                        <div>
                                            <img src="https://placeholder.pics/svg/500x300/11">
                                            <p>
                                                gkgkgkgk<br />
                                                하하하하하<br />
                                                하하하하하<br />
                                                하하하하하<br />
                                                하하하하하<br />
                                                하하하하하<br />
                                                5,000원
                                            </p>
                                        </div>
                                    </div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/12"></div>
                                </div>
                            </div>

Loop-mode-with-multiple-slides-per-group

3d-cube-effect

3d-coverflow-effect

Mousewheel-control

Lazy-loading-images

Chain slider

<div class="swiper-container sp--css-notready"
                                data-type="default"
                                data-chain="index"
                                data-swiper="
                                    loop = true
                                    loopedSlides = 5
                                    autoplay-delay = 5000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x400/1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x400/f5f5f5/333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x400/f5f5f5/333&text=3"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x400/f5f5f5/333&text=4"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x400/f5f5f5/333&text=5"></div>
                                </div>
                            </div>
                            
                            
                            <div class="swiper-container sp--css-notready"
                                data-type="multiple-slides-per-view"
                                data-chain="index"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 5
                                    loopedSlides = 5
                                    slideToClickedSlide = true
                                    centeredSlides = true
                                    pagination = delete
                                    navigation = delete
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/333333/ffffff&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/333333/ffffff&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/333333/ffffff&text=3"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/333333/ffffff&text=4"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/500x300/333333/ffffff&text=5"></div>
                                </div>
                            </div>

Slider Hover Controler

Slider Arrow Theme

<div class="swiper-container sp--css-notready"
                                [arrow="md-primary-hover-inside"]
                                data-type="default"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                arrow="xl-black-[inside]"
                                data-type="default"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                arrow="xl-primary-[outside]"
                                data-type="fade"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x500/eaeaea/333333&text=3"></div>
                                </div>
                            </div>

Slider Pager Theme

<div class="swiper-container sp--css-notready"
                                [page="xs-primary-hover"]
                                data-type="default"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [page="xs-primary-outside"]
                                data-type="default"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                page="md-dark-[wide]-outside"
                                data-type="default"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

Slider Fraction Theme

<div class="swiper-container sp--css-notready"
                                [page="outside"]
                                [fraction="md-gray"]
                                data-type="fraction-pagination"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [fraction="md-primary"]
                                data-type="fraction-pagination"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [page="hover"]
                                fraction="md-dark"
                                data-type="fraction-pagination"
                                data-swiper="
                                    loop = true
                                    slidesPerView = 1
                                    loopedSlides = 5
                                    autoplay-delay = 50000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1400x300/f0f0f0/333333&text=3"></div>
                                </div>
                            </div>

Slider Custom Buttons

<div class="swiper-container sp--css-notready"
                                [custom="md-gray"]
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="버튼 1"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=1"></div>
                                    <div class="swiper-slide" data-page="버튼 2"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=2"></div>
                                    <div class="swiper-slide" data-page="버튼 3"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [custom="md-primary"]
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="버튼 1"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=1"></div>
                                    <div class="swiper-slide" data-page="버튼 2"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=2"></div>
                                    <div class="swiper-slide" data-page="버튼 3"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [page="outside"]
                                custom="md-dark"
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="버튼 1"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=1"></div>
                                    <div class="swiper-slide" data-page="버튼 2"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=2"></div>
                                    <div class="swiper-slide" data-page="버튼 3"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [custom="md-dark-square"]
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="버튼 1"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=1"></div>
                                    <div class="swiper-slide" data-page="버튼 2"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=2"></div>
                                    <div class="swiper-slide" data-page="버튼 3"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [custom="lg-dark-justify"]
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                                ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="버튼 1"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=1"></div>
                                    <div class="swiper-slide" data-page="버튼 2"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=2"></div>
                                    <div class="swiper-slide" data-page="버튼 3"><img src="https://placeholder.pics/svg/1400x300/dadada/333&text=3"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [custom="md-primary-grid-3"]
                                data-type="custom-pagination"
                                data-swiper="
                                    loop = true
                                    autoplay-delay = 5000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=1"></div>
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=2"></div>
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=3"></div>
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=4"></div>
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=5"></div>
                                    <div class="swiper-slide" data-page="김치를 먹어요<br />맛있게~"><img src="https://placeholder.pics/svg/1400x300/dddddd/ffffff&text=6"></div>
                                </div>
                            </div>

Slider Active Opacity, Scale

<div class="swiper-container sp--css-notready"
                                [scope="active-opacity"]
                                data-type="centered-slides"
                                data-swiper="
                                    slidesPerView = 3
                                    spaceBetween = 30
                                    centeredSlides = true
                                    autoplay-delay = 500000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=3"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=4"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=5"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=6"></div>
                                </div>
                            </div>

<div class="swiper-container sp--css-notready"
                                [scope="active-scale"]
                                data-type="centered-slides"
                                data-swiper="
                                    slidesPerView = 3
                                    spaceBetween = 5
                                    centeredSlides = true
                                    autoplay-delay = 500000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=1"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=3"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=4"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=5"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/800x400/333333/ffffff&text=6"></div>
                                </div>
                            </div>

Class

name	description
.swiper-container	스와이퍼 컨테이너
.swiper-wrapper	스와이퍼 내부 커버
.swiper-slide	스와이퍼 요소

Attribute

name description

data-type

name	description
data-type	슬라이더 타입을 결정 type document
data-swiper *	슬라이더 내부 명령어 입력 가능 코드는 엔터로 구분되며, = 기준으로 split 된다. entity-sub = value 형태이며, sub 은 디렉토리에 해당한다. 매우 까다로우니, 가급적 기본 소스를 사용하자. // 옵션이 매우 많으므로, 중요한 항목만 열거한다. data-swiper=" loop = true // 무한반복 slidesPerView = 1 // 한 화면에 보여줄 개수 loopedSlides = 5 // 클론을 할 개수. 걍 slidesPerView 이거랑 같은 숫자 적어주자. spaceBetween = 30 // 슬라이더 사이의 간격 centeredSlides = true // 슬라이더를 가운데로 정렬 autoplay-delay = 5000 // 다음 슬라이더로 가는 시간 [pagination = delete // 속성 자체를 삭제할 수 있다.] [navigation = delete // 속성 자체를 삭제할 수 있다.] observer = true // 슬라이더를 주시한다. observeParents = true // 숨김 상태일때 사용하는게 좋다. "

슬라이더 타입을 결정

type document

data-swiper *

슬라이더 내부 명령어 입력 가능
코드는 엔터로 구분되며, = 기준으로 split 된다.
entity-sub = value 형태이며, sub 은 디렉토리에 해당한다.

매우 까다로우니, 가급적 기본 소스를 사용하자.

// 옵션이 매우 많으므로, 중요한 항목만 열거한다.

data-swiper="
    loop = true                     // 무한반복
    slidesPerView = 1               // 한 화면에 보여줄 개수
    loopedSlides = 5                // 클론을 할 개수. 걍 slidesPerView 이거랑 같은 숫자 적어주자.
    spaceBetween = 30               // 슬라이더 사이의 간격
    centeredSlides = true           // 슬라이더를 가운데로 정렬
    autoplay-delay = 5000           // 다음 슬라이더로 가는 시간
    [pagination = delete             // 속성 자체를 삭제할 수 있다.]
    [navigation = delete             // 속성 자체를 삭제할 수 있다.]
    observer = true                 // 슬라이더를 주시한다.
    observeParents = true           // 숨김 상태일때 사용하는게 좋다.
"

Etc

* display none 상태에서 보여줄 시 loop 는 false 이어야 한다.
* 예를 들어 팝업창으로 슬라이더가 나오는 경우 loop는 false로 하자.
슬라이더는 화면에 속해있을때만 작동한다.
동영상이나, 프로그래스바는 크게 의미가 없는 듯 하다.