Version: Next

APIs

Swiper parameters

ParameterTypedefaultDescription
directionstring'horizontal'Could be 'horizontal' or 'vertical' (for vertical slider).
speednumber300Duration of transition between slides (in ms)
intermittentnumber0Time to suspend between two swip actions. Only for mousewheel mode.
initialSlidenumber0Index number of initial slide.
spaceBetweennumber0Distance between slides in px.
longSwipesMsnumber300Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes
longSwipesRationumber0.5Ratio to trigger swipe to next/previous slide during long swipes.
slidePrevClassstring'swiper-slide-prev'CSS class name of slide which is right before currently active slide
slideNextClassstring'swiper-slide-next'CSS class name of slide which is right after currently active slide
slideActiveClassstring'swiper-slide-active'CSS class name of currently active slide
slideClassstring'swiper-slide'CSS class name of slide
wrapperClassstring'swiper-wrapper'CSS class name of slides' wrapper
touchRationumber1Touch ratio
touchAnglenumber45Allowable angle (in degrees) to trigger touch move. Range of values: [0, 90].
touchStartPreventDefaultbooleantrueIf disabled, touchstart (mousedown) event won't be prevented
touchStartForcePreventDefaultbooleanfalseForce to always prevent default for touchstart (mousedown) event
touchMoveStopPropagationbooleanfalseIf enabled, then propagation of "touchmove" will be stopped
mousewheelobject/booleanfalseEnables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean true to enable with default settings.
passiveListenersbooleantruePassive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use e.preventDefault and you have conflict with it, then you should disable this parameter
resistancebooleantrueSet to false if you want to disable resistant bounds
resistanceRationumber0.85This option allows you to control resistance ratio
pluginsTinySwiperPlugins[]undefinedPlugins for Tiny-Swiper instance.
excludeElementsHTMLElements[][]An HTMLElement array which contains all elements that do not trigger swipe.
slidesPerViewnumber1Number of slides per view (slides visible at the same time on slider's container).
centeredSlidesbooleanfalseIf true, then active slide will be centered, not always on the left side.

Mousewheel Control Parameters

ParameterTypedefaultDescription
sensitivitynumber1Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity
invertbooleanfalseSet to true to invert sliding direction

Methods

MethodDescription
updateUpdate instance status if you changed DOM manually.
updateSizeUpdate instance status if DOM size changed.
slideTo (targetIndex: number, duration?: number)Slide to specific index with specificated time duration.
destroyDestroy slider instance, detach all events listeners and reset style.
on(eventName: string, cb: function)Register life hooks callback function.
off(eventName: string, cb: function)Cancel life hooks callback function.
use(TinySwiperPlugin[])Register plugins globally.

Life Hooks

You can do something at special moments by registering Tiny-Swiper instance life hooks. Such as create a plugin.

HookNameParametersDescription
before-initinstance: SwiperInstanceBefore Tiny-Swiper instance initialize.
after-initinstance: SwiperInstanceAfter Tiny-Swiper instance initialize.
before-slidecurrentIndex: number, state: State, newIndex: numberBefore Tiny-Swiper instance slide changes. index does not change yet.
scrollstate: StateSliders is scrolling.
after-slidenewIndex: number, state: StateAfter Tiny-Swiper instance slide changes.
before-destroyinstance: SwiperInstanceBefore Tiny-Swiper instance is destroyed.
after-destroyinstance: SwiperInstanceAfter Tiny-Swiper instance is destroyed, every thing is restored.

Using Plugins

Tiny-Swiper instance only reserve core functions such as init destroy LifeHooks. So, You should load specific plugin if you need something special likes pagination.

Plugin is under lib/modules folder. You could import theme as ES modules:

import { SwiperPluginPagination } from 'tiny-swiper' // Since v1.2.0
// or
import SwiperPluginPagination from 'tiny-swiper/lib/modules/pagination.min.js'

Or via CDN:

<script src="https://unpkg.com/tiny-swiper@latest/lib/modules/pagination.min.js"></script>

And the most important โ€”โ€” initialization:

  1. Register SwiperPluginPagination as default plugin, so every Swiper instance will be supported.

    // All intances instantiated with Swiper has pagination plugin
    Swiper.use([ SwiperPluginPagination ])
    const swiper = new Swiper(
    swiperContainerElement,
    {
    // SwiperPluginPagination configuration,
    // just make sure that pagination is not equal to false.
    pagination: {
    clickable: true
    }
    }
    )
  2. Or just for current instance via the plugin parameter

    const swiper = new Swiper(
    swiperContainerElement,
    {
    // SwiperPluginPagination configuration.
    pagination: {
    clickable: true
    },
    // Add SwiperPluginPagination plugin.
    plugins: [ SwiperPluginPagination ]
    }
    )
caution

Notice: Two configurations are mutually exclusive. Plugin parameter gets higher priority.

Do not forget, just keep Plugin parameter at the first level of configuration.

Plugin List

Pagination

Pagination is the indicator of siwper for indicating current index.

  • Global name on window: SwiperPluginPagination.
  • Configuration name: pagination.

Usage

import SwiperPluginPagination from 'tiny-swiper/lib/modules/pagination.min.js'
const swiper = new Swiper(
swiperContainerElement,
{
// SwiperPluginPagination configuration.
pagination: {
clickable: true
},
// Add SwiperPluginPagination plugin.
plugins: [ SwiperPluginPagination ]
}
)

Notice: Tiny-Swiper does not provide default CSS file. You have to define style yourself.

Pagination Parameters

ParameterTypedefaultDescription
paginationobject/booleanundefinedObject with navigation parameters.
ParameterTypedefaultDescription
clickablebooleanfalseIf true then clicking on pagination button will cause transition to appropriate slide
bulletClassstring'swiper-pagination-bullet'CSS class name of single pagination bullet
bulletActiveClassstring'swiper-pagination-bullet-active'CSS class name of currently active pagination bullet

Lazyload

Try loading less images to reduce the number of HTTP requests.

  • Global name on window: SwiperPluginLazyload.
  • Configuration name: lazyload.

Usage

Using data-src attribute to enable lazyload. .swiper-lazy-preloader will keep display till image is loaded/error. Viewing the demonstration.

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="path/to/picture-2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="path/to/picture-3.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
Swiper.use([ SwiperPluginLazyload ])
var mySwiper = new Swiper('#swiper', {
lazyload: {
loadPrevNext: false,
loadPrevNextAmount: 1,
loadOnTransitionStart: false,
elementClass: 'swiper-lazy',
loadingClass: 'swiper-lazy-loading',
loadedClass: 'swiper-lazy-loaded',
preloaderClass: 'swiper-lazy-preloader'
}
})
ParameterTypedefaultDescription
lazyloadobject/booleanundefinedObject with parameters.
ParameterTypedefaultDescription
loadPrevNextbooleanfalseSet to "true" to enable lazy loading for the closest slides images (for previous and next slide images)
loadPrevNextAmountnumber1Amount of next/prev slides to preload lazy images in. Can't be less than slidesPerView
loadOnTransitionStartbooleanfalseLoading image on before-slide event. loading on after-slide if set to false.
elementClassstring'swiper-lazy'CSS class name of lazy element
loadingClassstring'swiper-lazy-loading'CSS class name of lazy loading element
loadedClassstring'swiper-lazy-loaded'CSS class name of lazy loaded element
preloaderClassstring'swiper-lazy-preloader'CSS class name of lazy preloader

Keyboard Control

Control Tiny-Swiper with directional arrow keys on keyboard.

  • Global name on window: SwiperPluginKeyboardControl.
  • Configuration name: keyboard.

Usage

Swiper.use([ SwiperPluginKeyboardControl ])
var mySwiper = new Swiper('#swiper', {
keyboard: {
enabled: true,
onlyInViewport: true
}
})
ParameterTypedefaultDescription
keyboardobject/booleanundefinedObject with parameters.
ParameterTypedefaultDescription
enabledbooleantrueSet to "true" to enable keyboard control function.
onlyInViewportbooleantrueKeyboard control will be enabled only if container element is displayed in viewport integrally.

Mousewheel

Control Tiny-Swiper with mouse.

  • Global name on window: SwiperPluginMousewheel.
  • Configuration name: mousewheel.

Usage

import SwiperPluginMousewheel from 'tiny-swiper/lib/modules/mousewheel.min.js'
const swiper = new Swiper(
swiperContainerElement,
{
// SwiperPluginMousewheel configuration.
mousewheel: {
interval: 1000
},
// Add SwiperPluginMousewheel plugin.
plugins: [ SwiperPluginMousewheel ]
}
)

Notice: SwiperPluginMousewheel was completely stripped from core module since v2.x.

Mousewheel Parameters

ParameterTypedefaultDescription
mousewheelobject/booleanundefinedObject with mousewheel parameters.
ParameterTypedefaultDescription
invertbooleanfalseInvert the direction of scroll wheel on the mouse
sensitivitynumber1The threshold value of scroll distance
intervalnumber400Time to suspend slide between two swip actions