Download and Install Swiper First of all we need to download required Swiper files: We can download them from Swiper GitHub repository Or we can install them via Bower, enter in terminal: Or, using Atmosphere as Meteor package: Or, using NPM In the downloaded/installed package we need files from the dist/ folder. Use Swiper from CDN If you …
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 …
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 …
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 …
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 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 …
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 …
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”, …
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 …
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 …
