Swiper
기본 레이아웃/CSS
기본형
회전형
스크롤형
썸네일형
옵션값
| Parameter | Type | Default | Description |
|---|---|---|---|
initialSlide |
number | 0 | Index number of initial slide. |
direction |
string | 'horizontal' | Could be 'horizontal' or 'vertical' (for vertical slider). |
speed |
number | 300 | Duration of transition between slides (in ms) |
setWrapperSize |
boolean | false | Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slides. Mostly should be used as compatibility fallback option for browser that don't support flexbox layout well |
virtualTranslate |
boolean | false | Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition |
width |
number |
Swiper width (in px). Parameter allows to force Swiper width. Useful only if you initialize Swiper when it is hidden. Warning: Setting this parameter will make Swiper not responsive |
|
height |
number |
Swiper height (in px). Parameter allows to force Swiper height. Useful only if you initialize Swiper when it is hidden. Warning: Setting this parameter will make Swiper not responsive |
|
autoHeight |
boolean | false | Set to true and slider wrapper will adopt its height to the height of the currently active slide |
roundLengths |
boolean | false | Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such) |
nested |
boolean | false | Set to true on nested Swiper for correct touch events interception. Use only on nested swipers that use same direction as the parent one |
| Autoplay | |||
autoplay |
number | - |
Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled If you need to specify different delay for specifi slides you can do it by using data-swiper-autoplay (in ms) attribute on slide:
<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000"> |
autoplayStopOnLast |
boolean | false | Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode) |
autoplayDisableOnInteraction |
boolean | true | Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction |
| Progress | |||
watchSlidesProgress |
boolean | false | Enable this feature to calculate each slides progress |
watchSlidesVisibility |
boolean | false | watchSlidesProgress should be enabled. Enable this option and slides that are in viewport will have additional visible class |
| Freemode | |||
freeMode |
boolean | false | If true then slides will not have fixed positions |
freeModeMomentum |
boolean | true | If true, then slide will keep moving for a while after you release it |
freeModeMomentumRatio |
number | 1 | Higher value produces larger momentum distance after you release slider |
freeModeMomentumVelocityRatio |
number | 1 | Higher value produces larger momentum velocity after you release slider |
freeModeMomentumBounce |
boolean | true | Set to false if you want to disable momentum bounce in free mode |
freeModeMomentumBounceRatio |
number | 1 | Higher value produces larger momentum bounce effect |
freeModeMinimumVelocity |
number | 0.02 | Minimum touchmove-velocity required to trigger free mode momentum |
freeModeSticky |
boolean | false | Set to true to enable snap to slides positions in free mode |
| Effects | |||
effect |
string | 'slide' | Could be "slide", "fade", "cube", "coverflow" or "flip" |
fade |
object |
fade:{
|
Fade effect parameters |
cube |
object |
cube: {
|
Cube effect parameters. For better performance you may disable shadows |
coverflow |
object |
coverflow: {
|
Coverflow effect parameters. For better performance you may disable shadows |
flip |
object |
flip: {
|
Flip effect parameters. limitRotation (when enabled) limits slides rotation angle to 180deg maximum. It allows to quickly "flip" between different slides. If you use "slow" transitions then it is better to disable it. |
| Parallax | |||
parallax |
boolean | false | Enable, if you want to use "parallaxed" elements inside of slider |
| Slides grid | |||
spaceBetween |
number | 0 | Distance between slides in px. |
slidesPerView |
number or 'auto' | 1 |
Number of slides per view (slides visible at the same time on slider's container).
If you use it with "auto" value and along with loop: true then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)
slidesPerView: 'auto' is currently not compatible with multirow mode, when slidesPerColumn > 1
|
slidesPerColumn |
number | 1 | Number of slides per column, for multirow layout |
slidesPerColumnFill |
string | 'column' | Could be 'column' or 'row'. Defines how slides should fill rows, by column or by row |
slidesPerGroup |
number | 1 | Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1 |
centeredSlides |
boolean | false | If true, then active slide will be centered, not always on the left side. |
slidesOffsetBefore |
number | 0 | Add (in px) additional slide offset in the beginning of the container (before all slides) |
slidesOffsetAfter |
number | 0 | Add (in px) additional slide offset in the end of the container (after all slides) |
| Grab Cursor | |||
grabCursor |
boolean | false | This option may a little improve desktop usability. If true, user will see the "grab" cursor when hover on Swiper |
| Etc. options http://idangero.us/swiper/api/ | |||