swiper

Making Custom Version of Swiper

You have two options of making custom version of Swiper. 1. Using ES-module If you use bundler with ES-modules support in your project you can import only the modules you need: The following modules are exported from swiper.esm.js: Swiper – core library Virtual – Virtual Slides module Keyboard – Keyboard Control module Mousewheel – Mousewheel Control module Navigation – Navigation module …

Making Custom Version of Swiper Read More »

Swiper API: Layout and Initialize

Swiper Full HTML Layout Initialize Swiper Now, when we have Swiper’s HTML, we need to initialize it using the following function: new Swiper(swiperContainer, parameters)- initialize swiper with options swiperContainer – HTMLElement or string (with CSS Selector) of swiper container HTML element. Required. parameters – object – object with Swiper parameters. Optional. Method returns initialized Swiper instance For example: After you initialize Swiper it is possible …

Swiper API: Layout and Initialize Read More »

Swiper API: Parameters

Let’s look on list of all available parameters: Parameter Type Default Description init boolean true Whether Swiper should be initialised automatically when you create an instance. If disabled, then you need to init it manually by calling mySwiper.init() initialSlide number 0 Index number of initial slide. direction string ‘horizontal’ Could be ‘horizontal’ or ‘vertical’ (for vertical …

Swiper API: Parameters Read More »

Swiper API: Slider Methods and Properties

After we initialize Slider we have its initialized instance in variable (like mySwiper variable in example above) with helpful methods and properties: Properties mySwiper.params Object with passed initialization parameters mySwiper.$el Dom7 element with slider container HTML element. To get vanilla HTMLElement use mySwiper.el mySwiper.$wrapperEl Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use mySwiper.wrapperEl mySwiper.slides Dom7 …

Swiper API: Slider Methods and Properties Read More »

Swiper API: Events

Swiper comes with a bunch of useful events you can listen. Events can be assigned in two ways: Using on parameter on swiper initialization: Using on method after swiper initialization. Please note, that this keyword within event handler always points to Swiper instance Event name Arguments Description init   Event will be fired right after Swiper initialization. Note that with swiper.on(‘init’) syntax it …

Swiper API: Events Read More »

Swiper API: Navigation

Navigation Parameters Parameter Type Default Description navigation object   Object with navigation parameters. For example:var mySwiper = new Swiper(‘.swiper-container’, { navigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’, }, });  { nextEl string / HTMLElement null String with CSS selector or HTML element of the element that will work like “next” button after click on it prevEl …

Swiper API: Navigation Read More »

Swiper API: Pagination

Pagination Parameters Parameter Type Default Description pagination object   Object with navigation parameters. For example:var mySwiper = new Swiper(‘.swiper-container’, { pagination: { el: ‘.swiper-pagination’, type: ‘bullets’, }, });  { el string null String with CSS selector or HTML element of the container with pagination type string ‘bullets’ String with type of pagination. Can be “bullets”, …

Swiper API: Pagination Read More »

Swiper API: Scrollbar

Scrollbar Parameters Parameter Type Default Description scrollbar object   Object with scrollbar parameters. For example:var mySwiper = new Swiper(‘.swiper-container’, { scrollbar: { el: ‘.swiper-scrollbar’, draggable: true, }, });  { el string / HTMLElement null String with CSS selector or HTML element of the container with scrollbar. hide boolean true Hide scrollbar automatically after user interaction …

Swiper API: Scrollbar Read More »

Swiper API: Autoplay

Autoplay Parameters Parameter Type Default Description autoplay object/boolean   Object with autoplay parameters or boolean true to enable with default settings. For example:var mySwiper = new Swiper(‘.swiper-container’, { autoplay: { delay: 5000, }, });  { delay number 3000 Delay between transitions (in ms). If this parameter is not specified, auto play will be disabledIf you need to …

Swiper API: Autoplay Read More »