j1-template 2024.3.16 → 2024.3.17

data/lib/starter_web/pages/public/_includes/documents/swiper/400_swiper_modules.asciidoc

@@ -0,0 +1,2514 @@
+[role="mt-5"]
+[[swiper-modules]]
+== Modules
+
+Find available SwiperJS module descriptions also with the
+https://swiperjs.com/swiper-api#modules[Swiper Documentation, {browser-window--new}].
+
+
+[role="mt-4"]
+[[swiper-module-navigation]]
+=== Navigation
+
+In SwiperJS, the Navigation module provides a way to control the slider's
+movement using dedicated "next" and "previous" buttons.
+
+Customizable Buttons::
+You can use your own HTML elements (like buttons or icons) as navigation
+controls.
+
+Flexibility::
+The module offers options to customize the appearance and behavior of
+the navigation buttons.
+
+
+[role="mt-5"]
+[[swiper-module-navigation-parameters]]
+==== Parameters
+
+Find below available *Parameters* for the SwiperJS *Navigation* module.
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`disabledClass`
+|string
+|_swiper-button-disabled_
+|*CSS class name* added to navigation button when it becomes disabled.
+
+|`enabled`
+|boolean
+|*no default*
+|Boolean property to use with breakpoints to *enable/disable* navigation
+on certain *breakpoints*
+
+|`hiddenClass`
+|string
+|_swiper-button-hidden_
+|*CSS class name* added to *navigation button* when it becomes *hidden*.
+
+|hideOnClick
+|boolean
+|`false`
+|*Toggle* navigation *button visibility* after *click* on Slider's container.
+
+|`lockClass`
+|string
+|swiper-button-lock
+|*CSS class name* added to *navigation button* when it is *disabled*.
+
+|`navigationDisabledClass`
+|string
+|_swiper-navigation-disabled_
+|*CSS class name* added *on swiper container* when navigation is *disabled*
+by *breakpoint*
+
+|`nextEl`
+|any
+|null
+|String with *CSS selector* or *HTML element* of the element that will
+work like *next button* after click on it.
+
+|`prevEl`
+|any
+|null
+|String with *CSS selector* or *HTML element* of the element that will
+work like *prev button* after click on it.
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-properties]]
+==== Properties
+
+Find below available *Properties* for the SwiperJS *Navigation* module.
+
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Description \| Example
+
+|`nextEl`
+|HTMLElement of *next* navigation button.
+
+|`prevEl`
+|HTMLElement of *previous* navigation button
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-methods]]
+==== Methods
+
+Find below available *Methods* for the SwiperJS *Navigation* module.
+
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Description \| Example
+
+|`destroy()`
+|Destroy navigation.
+
+|`init()`
+|Initialize navigation.
+
+|`update()`
+|Update navigation buttons state (enabled/disabled).
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-events]]
+==== Events
+
+Find below available Events for the SwiperJS *Navigation* module.
+
+[role="mt-4"]
+[[swiper-module-navigation-events-navigationHide]]
+===== navigationHide
+
+Event will be fired on *navigation hide*
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    navigationHide: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-events-navigationNext]]
+===== navigationNext
+
+Event will be fired on *click* the navigation *next button*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    navigationNext: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-events-navigationPrev]]
+===== navigationPrev
+
+Event will be fired on *click* the navigation *prev button*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    navigationPrev: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-events-navigationShow]]
+===== navigationShow
+
+Event will be fired on *navigation show*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    navigationShow: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-navigation-css-properties]]
+==== CSS Properties
+
+Find below available *CSS Properties* for the SwiperJS *Navigation* module.
+
+[source,language-css]
+----
+{
+    --swiper-navigation-size: 44px;
+    --swiper-navigation-top-offset: 50%;
+    --swiper-navigation-sides-offset: 10px;
+    --swiper-navigation-color: var(--swiper-theme-color);
+}
+----
+
+
+[role="mt-5"]
+[[swiper-module-pagination]]
+=== Pagination
+
+The Pagination module in SwiperJS is a powerful tool that allows you to
+easily add visual indicators to your slider, making it clear to users
+how many slides there are and which slide they are currently viewing.
+Here's a breakdown of its key functionalities:
+
+Active State::
+The indicator corresponding to the currently active slide is visually
+highlighted to provide immediate feedback to the user.
+
+User Interaction::
+In many cases, the pagination indicators are clickable. Clicking on an
+indicator will directly navigate the slider to the corresponding slide.
+
+Visual Indicators::
+The module generates a set of visual indicators (often small dots or numbers)
+that represent each slide in your slider.
+
+
+[role="mt-4"]
+[[swiper-module-pagination-parameters]]
+==== Parameters
+
+Find below available *Parameters* for the SwiperJS *Pagination* module.
+
+// [cols="4a,2,2,3a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols=",,,", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`bulletActiveClass`
+|string
+|_swiper-pagination-bullet-active_
+|*CSS class name* of the *active* pagination *bullet*.
+
+|`bulletClass`
+|string
+|_swiper-pagination-bullet_
+|*CSS class name* of the pagination *bullet*.
+
+|`bulletElement`
+|string
+|_span_
+|Defines which HTML tag will be used to represent single pagination bullet.
+Only for pagination type of _bullets_ .
+
+|`clickable`
+|boolean
+|`false`
+|If `true` then clicking on pagination button will cause transition
+to appropriate slide. Only for bullets pagination type.
+
+|`clickableClass`
+|string
+|_swiper-pagination-clickable_
+|*CSS class name* set to pagination if its *clickable*.
+
+|`currentClass`
+|string
+|_swiper-pagination-current_
+|*CSS class name* of the element with currently active index in
+*fraction* pagination.
+
+|`dynamicBullets`
+|boolean
+|`false`
+|Good to enable if you use bullets pagination with a lot of slides.
+So it will keep only few bullets visible at the same time.
+
+|`dynamicMainBullets`
+|number
+|1
+|The number of main bullets visible when `dynamicBullets` is enabled.
+
+|`el`
+|any
+|null
+|String with CSS selector or HTML element of the container with pagination.
+
+|`enabled`
+|boolean
+|*no default*
+|Boolean property to use with breakpoints to enable/disable pagination
+on certain breakpoints.
+
+|`formatFractionCurrent`
+|function(number)
+|*no default*
+|Format fraction pagination current number. Function receives current
+number, and you need to return formatted value.
+
+|`formatFractionTotal`
+|function(number)
+|*no default*
+|Format fraction pagination total number. Function receives total number,
+and you need to return formatted value.
+
+|`hiddenClass`
+|string
+|_swiper-pagination-hidden_
+|*CSS class name* of pagination when it becomes inactive.
+
+|`hideOnClick`
+|boolean
+|`true`
+|Toggle (hide/show) pagination container visibility after click on
+slider's container.
+
+|`horizontalClass`
+|string
+|_swiper-pagination-horizontal_
+|CSS class name set to pagination in horizontal Swiper.
+
+|`lockClass`
+|string
+|_swiper-pagination-lock_
+|*CSS class name* set to pagination when it is disabled.
+
+|`modifierClass`
+|string
+|_swiper-pagination-_
+|The *beginning* of the *modifier CSS class name* that will be added
+to pagination depending on parameters.
+
+|`paginationDisabledClass`
+|string
+|_swiper-pagination-disabled_
+|*CSS class name* added on swiper container and pagination element
+when pagination is disabled by breakpoint.
+
+|`progressbarFillClass`
+|string
+|_swiper-pagination-progressbar-fill_
+|*CSS class name* of pagination progressbar fill element.
+
+|`progressbarOpposite`
+|boolean
+|`false`
+|Makes pagination progressbar opposite to Swiper's `direction`
+parameter, means vertical progressbar for horizontal swiper direction
+and horizontal progressbar for vertical swiper direction
+
+|`progressbarOppositeClass`
+|string
+|_swiper-pagination-progressbar-opposite_
+|*CSS class name* of pagination progressbar opposite
+
+|`renderBullet`
+|function(args)
+|*no default*
+|This parameter allows totally customize pagination bullets, you need to
+pass here a function that accepts `index` number of pagination bullet
+and required element class name (`className`). Only for `'bullets'`
+pagination type.
+
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+    //...
+    renderBullet: function (index, className) {
+        return '<span class="' + className + '">' + (index + 1) + '</span>';
+    }
+});
+----
+
+|`renderCustom`
+|function(args)
+|*no default*
+|This parameter is required for _custom_ pagination type where you
+have to specify how it should be rendered.
+
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+    //...
+    renderCustom: function (swiper, current, total) {
+        return current + ' of ' + total;
+    }
+});
+----
+
+|`renderFraction`
+|function(args)
+|*no default*
+|This parameter allows to customize *fraction* pagination html. Only for
+_fraction_ pagination type.
+
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+    //...
+    renderFraction: function (currentClass, totalClass) {
+        return '<span class="' + currentClass + '"></span>' +
+                ' of ' +
+                '<span class="' + totalClass + '"></span>';
+    }
+});
+----
+
+|`renderProgressbar`
+|function(args)
+|*no default*
+|This parameter allows to customize "progress" pagination. Only for
+_progress_ pagination type
+
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+    //...
+    renderProgressbar: function (progressbarFillClass) {
+        return '<span class="' + progressbarFillClass + '"></span>';
+    }
+});
+----
+
+|`totalClass`
+|string
+|_swiper-pagination-total_
+|*CSS class name* of the element with total number of *snaps* in
+*fraction* pagination.
+
+|`type`
+|string
+|_bullets_
+|String with type of pagination. +
+Can be _bullets_, _fraction_ , _progressbar_ or _custom_.
+
+|`verticalClass`
+|string
+|_swiper-pagination-vertical_
+|*CSS class name* set to pagination in vertical Swiper.
+
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-properties]]
+==== Properties
+
+Find below available *Properties* for the SwiperJS *Pagination* module.
+
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Property |Description \| Example
+
+|`bullets`
+|Array of pagination bullets HTML elements. To get specific slide
+HTMLElement use `swiper.pagination.bullets[1]`.
+
+|`el`
+|HTMLElement of pagination container element.
+
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-methods]]
+==== Methods
+
+Find below available *Methods* for the SwiperJS *Pagination* module.
+
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Method |Description \| Example
+
+|`destroy`
+|Destroy pagination.
+
+|`init`
+|Initialize pagination.
+
+|`render`
+|Render pagination layout.
+
+|`update`
+|Update pagination state of *enabled* \| *disabled* \| *active*.
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-events]]
+==== Events
+
+Find below available *Events* for the SwiperJS *Pagination* module.
+
+[role="mt-4"]
+[[swiper-module-pagination-events-paginationHide]]
+===== paginationHide
+
+Event will be fired on pagination hide.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    paginationHide: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-events-paginationRender]]
+===== paginationRender
+
+Event will be fired after pagination rendered.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    paginationRender: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-events-paginationShow]]
+===== paginationShow
+
+Event will be fired when pagination is *shown*.
+
+[NOTE]
+====
+Receives *paginationEl* event as an *argument*.
+====
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    paginationShow: (swiper, paginationEl) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-pagination-events-paginationUpdate]]
+===== paginationUpdate
+
+Event will be fired when pagination updated
+
+[NOTE]
+====
+Receives *paginationEl* event as an *argument*.
+====
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    paginationUpdate: (swiper, paginationEl) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+
+[role="mt-4"]
+[[swiper-module-pagination-css-properties]]
+==== CSS Properties
+
+Find below available *CSS Properties* for the SwiperJS *Pagination* module.
+
+[source,language-css]
+----
+{
+    --swiper-pagination-color: var(--swiper-theme-color);
+    --swiper-pagination-left: auto;
+    --swiper-pagination-right: 8px;
+    --swiper-pagination-bottom: 8px;
+    --swiper-pagination-top: auto;
+    --swiper-pagination-fraction-color: inherit;
+    --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
+    --swiper-pagination-progressbar-size: 4px;
+    --swiper-pagination-bullet-size: 8px;
+    --swiper-pagination-bullet-width: 8px;
+    --swiper-pagination-bullet-height: 8px;
+    --swiper-pagination-bullet-inactive-color: #000;
+    --swiper-pagination-bullet-inactive-opacity: 0.2;
+    --swiper-pagination-bullet-opacity: 1;
+    --swiper-pagination-bullet-horizontal-gap: 4px;
+    --swiper-pagination-bullet-vertical-gap: 6px;
+}
+----
+
+
+[role="mt-5"]
+[[swiper-module-scrollbar]]
+=== Scrollbar
+
+The Scrollbar module in SwiperJS is a powerful tool that enhances user
+interaction and provides visual feedback within your slider. Here's a
+breakdown of its key functionalities:
+
+Visual Indicator::
+The module renders a visual scrollbar that dynamically reflects the
+slider's current position. This provides users with a clear understanding
+of where they are within the overall content.
+
+Draggable Interaction::
+The scrollbar can be made draggable, allowing users to directly control
+the slider's position by moving the scrollbar handle. This offers an
+alternative navigation method to swiping or clicking.
+
+Customization::
+You can extensively customize the appearance and behavior of the scrollbar
+to match your project's design. This includes options for size, color,
+position, and more.
+
+[role="mt-4"]
+==== Scrollbar Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-dragClass[dragClass] |string |'swiper-scrollbar-drag'
+|Scrollbar draggable element CSS class
+
+|link:#param-dragSize[dragSize] |number \| 'auto' |'auto' |Size of
+scrollbar draggable element in px
+
+|link:#param-draggable[draggable] |boolean |`false` |Set to `true` to
+enable make scrollbar draggable that allows you to control slider
+position
+
+|link:#param-el[el] |any |null |String with CSS selector or HTML element
+of the container with scrollbar.
+
+|link:#param-enabled[enabled] |boolean | |Boolean property to use with
+breakpoints to enable/disable scrollbar on certain breakpoints
+
+|link:#param-hide[hide] |boolean |`true` |Hide scrollbar automatically
+after user interaction
+
+|link:#param-horizontalClass[horizontalClass] |string
+|'swiper-scrollbar-horizontal' |CSS class name set to scrollbar in
+horizontal Swiper
+
+|link:#param-lockClass[lockClass] |string |'swiper-scrollbar-lock'
+|Scrollbar element additional CSS class when it is disabled
+
+|link:#param-scrollbarDisabledClass[scrollbarDisabledClass] |string
+|'swiper-scrollbar-disabled' |CSS class name added on swiper container
+and scrollbar element when scrollbar is disabled by breakpoint
+
+|link:#param-snapOnRelease[snapOnRelease] |boolean |`false` |Set to
+`true` to snap slider position to slides when you release scrollbar
+
+|link:#param-verticalClass[verticalClass] |string
+|'swiper-scrollbar-vertical' |CSS class name set to scrollbar in
+vertical Swiper
+|===
+
+[role="mt-4"]
+==== Scrollbar Methods
+
+[cols=",,",]
+|===
+|Properties | |
+
+|link:#prop-swiper-dragEl[swiper.dragEl] |HTMLElement |HTMLElement of
+Scrollbar draggable handler element
+
+|link:#prop-swiper-el[swiper.el] |HTMLElement |HTMLElement of Scrollbar
+container element
+
+|Methods | |
+
+|link:#method-swiper-destroy[swiper.destroy()] | |Destroy scrollbar
+
+|link:#method-swiper-init[swiper.init()] | |Initialize scrollbar
+
+|link:#method-swiper-setTranslate[swiper.setTranslate()] | |Updates
+scrollbar translate
+
+|link:#method-swiper-updateSize[swiper.updateSize()] | |Updates
+scrollbar track and handler sizes
+|===
+
+[role="mt-4"]
+==== Scrollbar Events
+
+[cols=",,",options="header",]
+|===
+|Name |Arguments |Description \| Example
+|link:#event-scrollbarDragEnd[scrollbarDragEnd] |(swiper, event) |Event
+will be fired on draggable scrollbar drag end
+
+|link:#event-scrollbarDragMove[scrollbarDragMove] |(swiper, event)
+|Event will be fired on draggable scrollbar drag move
+
+|link:#event-scrollbarDragStart[scrollbarDragStart] |(swiper, event)
+|Event will be fired on draggable scrollbar drag start
+|===
+
+[role="mt-4"]
+==== Scrollbar CSS Properties
+
+[source,language-css]
+----
+{
+    --swiper-scrollbar-border-radius: 10px;
+    --swiper-scrollbar-top: auto;
+    --swiper-scrollbar-bottom: 4px;
+    --swiper-scrollbar-left: auto;
+    --swiper-scrollbar-right: 4px;
+    --swiper-scrollbar-sides-offset: 1%;
+    --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
+    --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
+    --swiper-scrollbar-size: 4px;
+ }
+----
+
+[role="mt-5"]
+[[swiper-module-autoplay]]
+=== Autoplay
+
+The Autoplay module in SwiperJS is a powerful feature that allows you to
+automatically transition between slides in your slider at a specified
+interval. Here's a breakdown of its key functionalities:
+
+Automatic Slide Transitions::
+The primary function is to automatically move the slider to the next
+slide after a defined delay.
+
+Customization::
+You can extensively customize the autoplay behavior:
+
+* Delay:
+  Control the time interval between each slide transition.
+* Disable on Interaction:
+  Stop autoplay when the user interacts with the slider (e.g., swiping, clicking).
+* Reverse Direction:
+  Change the direction of autoplay (from right to left or vice versa).
+* Disable on Interaction:
+  Stop autoplay when the user interacts with the slider.
+
+[role="mt-4"]
+[[swiper-modules-autoplay-parameters]]
+==== Parameters
+
+[cols="4,2,2,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`delay`
+|number
+|3000
+|Delay between transitions (in ms). If this parameter is *not specified*,
+auto play will be *disabled*.
+
+If you need to specify different delay for specific slides you can do it
+by using `data-swiper-autoplay` (in ms) *attribute* individually on each
+slide.
+
+[source, html]
+----
+<!-- hold this slide for 2 seconds -->
+<div class="swiper-slide" data-swiper-autoplay="2000">
+----
+
+|`disableOnInteraction`
+|boolean
+|`true`
+|Set to `false` and autoplay will *not be disabled* after *user interactions*
+(swiping). It will be restarted every time after interaction.
+
+|`pauseOnMouseEnter`
+|boolean
+|`false`
+|When enabled, autoplay will *be paused* on pointer (mouse) enter
+*over Swiper container*.
+
+|`reverseDirection`
+|boolean
+|`false`
+|Enables autoplay in *reverse direction*.
+
+|`stopOnLastSlide`
+|boolean
+|`false`
+|Enable this parameter and autoplay is *stopped* when the *last slide*
+is reached.
+
+[CAUTION]
+====
+This setting has *no effect* in *loop mode*.
+====
+
+|`waitForTransition`
+|boolean
+|`true`
+|When enabled autoplay will *wait for wrapper transition* to *continue*.
+Can be disabled in case of using Virtual Translate when your slider may
+*not* have transitions.
+
+|===
+
+[role="mt-4"]
+[[swiper-modules-autoplay-properties]]
+==== Properties
+
+[cols="3,3,6a", subs=+macros, options="header", width="100%", role="rtable"]
+|===
+|Name |Type |Description
+
+|`paused`
+|boolean
+|Indicate whether autoplay is paused.
+
+|`running`
+|boolean
+|Indicate whether autoplay is enabled and running.
+
+|`timeLeft`
+|number
+|If autoplay is *paused*, it contains the *time left* (in ms) before
+transition starts to *next slide*.
+
+|===
+
+[role="mt-4"]
+[[swiper-modules-autoplay-methods]]
+==== Methods
+
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable"]
+|===
+|Name |Description
+
+|`paused`
+|Pause autoplay.
+
+|`resume`
+|Resume autoplay.
+
+|`start`
+|Starts autoplay.
+
+|`stop`
+|Stops autoplay.
+
+|===
+
+Find all events availalable for the 
+[role="mt-4"]
+[[swiper-modules-autoplay-events]]
+==== Events
+
+Find all events available for the *autoplay module*.
+
+[NOTE]
+====
+All events receives *swiper* event *data* as an *argument*.
+====
+
+[role="mt-4"]
+[[swiper-module-event-autoplay]]
+===== autoplay
+
+Event will be fired when *slide changed* with autoplay.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplay: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-event-autoplayPause]]
+===== autoplayPause
+
+Event will be fired on autoplay *pause*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplayPause: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-event-autoplayResume]]
+===== autoplayResume
+
+Event will be fired on autoplay *resume*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplayResume: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-event-autoplayStart]]
+===== autoplayStart
+
+Event will be fired in case autoplay has been *started*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplayStart: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-event-autoplayStop]]
+===== autoplayStop
+
+Event will be fired when autoplay has been *stopped*.
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplayStop: (swiper) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+[role="mt-4"]
+[[swiper-module-event-autoplayTimeLeft]]
+===== autoplayTimeLeft
+
+Event fires *continuously* while autoplay is *enabled*. It
+contains *time left* (in ms) before transition to next slide
+and *percentage* of the *time* related to *autoplay delay*.
+
+[NOTE]
+====
+Receives *swiper*, *timeLeft*, *percentage* event *data* as *arguments*.
+====
+
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Usage
+
+|
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+  // option settings ...
+  on: {
+    autoplayTimeLeft: (swiper, timeLeft, percentage) => {
+      // do something
+    }
+  }
+});
+----
+
+|===
+
+
+[role="mt-5"]
+[[swiper-module-free-mode]]
+=== Free Mode
+
+In SwiperJS, the Free Mode module allows for a more *fluid* and *interactive*
+sliding experience. Here's a breakdown of its key features:
+
+Free Movement::
+Slides can be freely dragged and positioned anywhere within the slider
+container.
+
+Momentum::
+When the user releases the slide, it continues to move with momentum,
+simulating realistic inertia.
+
+Sticky Option::
+This *optional* feature *snaps* the slide to the nearest position when
+it comes to rest, providing a more controlled experience.
+
+[role="mt-4"]
+==== Free Mode Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-enabled[enabled] |boolean |`false` |Whether the free mode is
+enabled
+
+|link:#param-minimumVelocity[minimumVelocity] |number |0.02 |Minimum
+touchmove-velocity required to trigger free mode momentum
+
+|link:#param-momentum[momentum] |boolean |`true` |If enabled, then slide
+will keep moving for a while after you release it
+
+|link:#param-momentumBounce[momentumBounce] |boolean |`true` |Set to
+`false` if you want to disable momentum bounce in free mode
+
+|link:#param-momentumBounceRatio[momentumBounceRatio] |number |1 |Higher
+value produces larger momentum bounce effect
+
+|link:#param-momentumRatio[momentumRatio] |number |1 |Higher value
+produces larger momentum distance after you release slider
+
+|link:#param-momentumVelocityRatio[momentumVelocityRatio] |number |1
+|Higher value produces larger momentum velocity after you release slider
+
+|link:#param-sticky[sticky] |boolean |`false` |Set to enabled to enable
+snap to slides positions in free mode
+|===
+
+
+[role="mt-5"]
+[[swiper-module-grid]]
+=== Grid
+
+The Grid module in SwiperJS allows you to create multi-row sliders,
+effectively arranging slides into a grid-like structure. Here's a
+breakdown of its key features:
+
+Multi-row layouts::
+Define the number of rows (`grid.rows`) to control how slides are distributed
+within the slider.
+
+Fill direction::
+Control how slides fill the rows:
+
+* grid.fill: *row*, Slides fill rows from left to right.
+* grid.fill: *column*, Slides fill columns from top to bottom.
+
+[role="mt-4"]
+==== Grid Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-fill[fill] |'row' \| 'column' |'column' a|
+Can be `'column'` or `'row'`. Defines how slides should fill rows,
+by column or by row
+
+____
+if used with loop mode make sure number of slides is even specified in
+loop mode requirements, or enable `loopAddBlankSlides` parameter
+____
+
+|link:#param-rows[rows] |number |1 |Number of slides rows, for multirow
+layout
+|===
+
+[role="mt-5"]
+[[swiper-module-manipulation]]
+=== Manipulation
+
+The Manipulation module adds useful methods to SwiperJS for manipulating
+slides. The module provides methods for dynamically adding, removing, and
+rearranging slides within the slider.
+
+[NOTE]
+====
+It makes sense to use it only with SwiperJS Core version, amd is *not*
+intended to be used with SwiperJS Environments like *React* or *Vue*.
+====
+
+[role="mt-4"]
+==== Manipulation Methods
+
+[width="100%",cols="34%,33%,33%",]
+|===
+|Methods | |
+
+|link:#method-swiper-addSlide[swiper.addSlide([.text-orange]#index#&#44;
+[.text-orange]#slides#)] | a|
+Add new slides to the required index. slides could be HTMLElement or
+HTML string with new slide or array with such slides, for example:
+
+[source, js]
+----
+addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
+addSlide(1, [
+    '<div class="swiper-slide">Slide 10"</div>',
+    '<div class="swiper-slide">Slide 11"</div>'
+]);
+----
+
+|link:#method-swiper-appendSlide[swiper.appendSlide([.text-orange]#slides#)]
+| a|
+Add new slides to the end. slides could be HTMLElement or HTML string
+with new slide or array with such slides, for example:
+
+[source, js]
+----
+appendSlide('<div class="swiper-slide">Slide 10"</div>')
+    
+    appendSlide([
+     '<div class="swiper-slide">Slide 10"</div>',
+     '<div class="swiper-slide">Slide 11"</div>'
+    ]);
+    
+----
+
+|link:#method-swiper-prependSlide[swiper.prependSlide([.text-orange]#slides#)]
+| a|
+Add new slides to the beginning. slides could be HTMLElement or HTML
+string with new slide or array with such slides, for example:
+
+[source, js]
+----
+prependSlide('<div class="swiper-slide">Slide 0"</div>')
+    
+    prependSlide([
+     '<div class="swiper-slide">Slide 1"</div>',
+     '<div class="swiper-slide">Slide 2"</div>'
+    ]);
+    
+----
+
+|link:#method-swiper-removeAllSlides[swiper.removeAllSlides()] | |Remove
+all slides
+
+|link:#method-swiper-removeSlide[swiper.removeSlide([.text-orange]#slideIndex#)]
+| a|
+Remove selected slides. slideIndex could be a number with slide index to
+remove or array with indexes.
+
+[source, js]
+----
+removeSlide(0); // remove first slide
+    removeSlide([0, 1]); // remove first and second slides
+    removeAllSlides();    // Remove all slides
+    
+----
+
+|===
+
+[role="mt-5"]
+[[swiper-module-parallax]]
+=== Parallax
+
+The SwiperJS parallax module supports parallax transition effects for
+swiper/slides nested elements. There are two types of parallax elements
+supported:
+
+* Direct child elements of `swiper`. Parallax effect for such elements
+  will depend on total slider progress. Useful for parallax backgrounds.
+
+* Slides child elements. Parallax effect for such elements will depend
+  on slide progress
+
+To enable parallax effects you need to init SwiperJS instance with passed
+`parallax: true` parameter and add one of the following (or mix)
+attributes to required elements:
+
+* `data-swiper-parallax`, enable transform-translate parallax transition.
+   This attribute may accept:
+
+** `number`, value in px (as for title, subtitle in example above) to
+move element depending on progress. In this case such element will be
+moved on ± this value in px depending on slide position (next or
+previous)
+
+** `percentage`, (as for "parallax-bg") to move element depending on
+    progress and on its size. In this case such element will be moved
+    on ± this percentage of its size (width in horizontal direction,
+    and height in vertical direction) depending on slide position
+    (next or previous). So if element has 400px width and you specified
+    data-swiper-parallax="50%" then it will be moved on ± 200px
+
+* `data-swiper-parallax-x`, same but for x-axis direction
+* `data-swiper-parallax-y`, same but for y-axis direction
+* `data-swiper-parallax-scale`, scale ratio of the parallax element
+   when it is in "inactive" (not on active slide) state
+* `data-swiper-parallax-opacity`, opacity of the parallax element
+   when it is in "inactive" (not on active slide) state
+* `data-swiper-parallax-duration`, custom transition duration for
+   parallax elements
+
+[source, html]
+----
+<div class="swiper">
+  <!-- Parallax background element -->
+  <div
+    class="parallax-bg"
+    style="background-image:url(path/to/image.jpg)"
+    data-swiper-parallax="-23%"
+    ></div>
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">
+      <!-- Each slide has parallax title -->
+      <div class="title" data-swiper-parallax="-100">Slide 1</div>
+      <!-- Parallax subtitle -->
+      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
+      <!-- And parallax text with custom transition duration -->
+      <div
+        class="text"
+        data-swiper-parallax="-300"
+        data-swiper-parallax-duration="600"
+        >
+        <p>Lorem ipsum dolor sit amet, ...</p>
+      </div>
+      <!-- Opacity parallax -->
+      <div data-swiper-parallax-opacity="0.5">I will change opacity</div>
+      <!-- Scale parallax -->
+      <div data-swiper-parallax-scale="0.15">I will change scale</div>
+    </div>
+    ...
+  </div>
+</div>
+----
+
+[role="mt-4"]
+==== Parallax Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-enabled[enabled] |boolean |`false` |Enable, if you want to
+use "parallaxed" elements inside of slider
+|===
+
+[role="mt-5"]
+[[swiper-module-lazy-loading]]
+=== Lazy Loading
+
+Since version 9 SwiperJSdoesn't have a specific lazy loading API, as it
+relies on native browser lazy loading feature. To use lazy loading, we
+just need to set `loading="lazy"` on images and add preloader element:
+
+[source, html]
+----
+<div class="swiper">
+  <div class="swiper-wrapper">
+    <!-- Lazy image -->
+    <div class="swiper-slide">
+      <img src="path/to/picture-1.jpg" loading="lazy" />
+      <div class="swiper-lazy-preloader"></div>
+    </div>
+    <!-- Lazy image with srcset -->
+    <div class="swiper-slide">
+      <img
+        src="path/to/logo-small.png"
+        srcset="path/to/logo-large.png 2x"
+        loading="lazy"
+        />
+      <div class="swiper-lazy-preloader"></div>
+    </div>
+  </div>
+</div>
+----
+
+As you see:
+
+* Lazy image must have `loading="lazy"` attribute
+* Add animated preloader spinner to slide which will be removed
+  automatically after image loaded:
+
+[source, html]
+----
+<div class="swiper-lazy-preloader"></div>
+----
+
+Or white one for dark layout:
+
+[source, html]
+----
+<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
+----
+
+[role="mt-5"]
+[[swiper-module-fade-effect]]
+=== Fade Effect
+
+The Fade Effect module in SwiperJS is a powerful tool for creating smooth
+and visually appealing *transitions* between slides in your slider.
+
+[NOTE]
+====
+Be sure to have the `effect` parameter set to _fade_ in order in order to
+make the module work.
+
+Parameter `crossFade` should be set to `true` in order to avoid seeing
+content *behind* or *underneath*.
+====
+
+[role="mt-4"]
+==== Fade Effect Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-crossFade[crossFade] |boolean |`false` |Enables slides cross
+fade
+|===
+
+[role="mt-5"]
+[[swiper-module-cover-effect]]
+=== Coverflow Effect
+
+Be sure to have the `effect` param set to `'coverflow'` in order for
+this to work.
+
+[role="mt-4"]
+==== Coverflow Effect Parameters
+
+[cols=",,,",options="header",]
+|===
+|Name |Type |Default |Description \| Example
+|link:#param-depth[depth] |number |100 |Depth offset in px (slides
+translate in Z axis)
+
+|link:#param-modifier[modifier] |number |1 |Effect multiplier
+
+|link:#param-rotate[rotate] |number |50 |Slide rotate in degrees
+
+|link:#param-scale[scale] |number |1 |Slide scale effect
+
+|link:#param-slideShadows[slideShadows] |boolean |`true` |Enables slides
+shadows
+
+|link:#param-stretch[stretch] |number |0 |Stretch space between slides
+(in px)
+|===
+
+[role="mt-5"]
+[[swiper-module-flip-effect]]
+=== Flip Effect
+
+The Flip Effect module in SwiperJS adds a 3D flip animation to the slides
+in your slider. 
+
+[NOTE]
+====
+Be sure to have the parameter `effect` set to _flip_ in order to make the
+module work.
+====
+
+[role="mt-4"]
+==== Flip Effect Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-limitRotation[limitRotation] |boolean |`true` |Limit edge
+slides rotation
+
+|link:#param-slideShadows[slideShadows] |boolean |`true` |Enables slides
+shadows
+|===
+
+
+[role="mt-5"]
+[[swiper-module-cube-effect]]
+=== Cube Effect
+
+The Cube Effect module in SwiperJS adds a 3D cube-like rotation effect
+to the *transitions* between slides in a SwiperJS slider instance.
+
+[NOTE]
+====
+Be sure to have the parameter `effect` set to _cube_ in order to make the
+module work.
+====
+
+[role="mt-4"]
+[[swiper-module-cube-effect-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-shadow[shadow] |boolean |`true` |Enables main slider shadow
+
+|link:#param-shadowOffset[shadowOffset] |number |20 |Main shadow offset
+in px
+
+|link:#param-shadowScale[shadowScale] |number |0.94 |Main shadow scale
+ratio
+
+|link:#param-slideShadows[slideShadows] |boolean |`true` |Enables slides
+shadows
+
+|===
+
+
+[role="mt-5"]
+[[swiper-module-cards-effect]]
+=== Cards Effect
+
+The Cards Effect module in SwiperJS adds a visually appealing, card-like
+sliding *animation* for *transitions* between slides in a SwiperJS slider
+instance.
+
+[NOTE]
+====
+Be sure to have the parameter `effect` set to _cards_ in order to make the
+module work.
+====
+
+[role="mt-4"]
+[[swiper-module-cards-effect-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-perSlideOffset[perSlideOffset] |number |8 |Offset distance
+per slide (in px)
+
+|link:#param-perSlideRotate[perSlideRotate] |number |2 |Rotate angle per
+slide (in degrees)
+
+|link:#param-rotate[rotate] |boolean |`true` |Enables cards rotation
+
+|link:#param-slideShadows[slideShadows] |boolean |`true` |Enables slides
+shadows
+
+|===
+
+
+[role="mt-5"]
+[[swiper-module-creative-effect]]
+=== Creative Effect
+
+The Creative Effect module in SwiperJS is a powerful tool for creating
+highly customized and visually striking slide transitions. Here's a breakdown
+of its key features:
+
+Highly Customizable Transitions::
+Allows you to define unique transformations for each slide (previous, next,
+and active) using properties like translate, rotate, scale, opacity, and more.
+This flexibility enables you to create a wide range of effects, from subtle
+shifts to dramatic 3D transformations.
+
+Precise Control::
+Offers fine-grained control over the timing and appearance of each effect
+by manipulating CSS properties directly. You can adjust the intensity,
+duration, and easing of transitions to achieve the desired visual impact.
+
+[NOTE]
+====
+Be sure to have the parameter `effect` set to _creative_ in order to make
+the module work.
+====
+
+[role="mt-4"]
+[[swiper-module-creative-effect-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`limitProgress`
+|number
+|1 
+|Limit progress/offset to amount of side slides. If `1`, then slides all
+slides after prev/next will have same state. If `2`, then all slides
+after 2nd before/after active will have same state, etc.
+
+|`next`
+|CreativeEffectTransform
+|
+|Next slide transformations.
+
+[source, js]
+----
+{
+    // Array with translate X, Y and Z values
+    translate: (string | number)[];
+    // Array with rotate X, Y and Z values (in deg)
+    rotate?: number[];
+    // Slide opacity
+    opacity?: number;
+    // Slide scale
+    scale?: number;
+    // Enables slide shadow
+    shadow?: boolean;
+    // Transform origin, e.g. `left bottom`
+    origin?: string;
+}
+----
+
+|link:#param-perspective[perspective] |boolean |`true` |Enable this
+parameter if your custom transforms require 3D transformations
+(`translateZ`, `rotateX`, `rotateY` )
+
+|link:#param-prev[prev] |CreativeEffectTransform | a|
+Previous slide transformations. Accepts object of the following type:
+
+[source, js]
+----
+{
+    // Array with translate X, Y and Z values
+    translate: (string | number)[];
+    // Array with rotate X, Y and Z values (in deg)
+    rotate?: number[];
+    // Slide opacity
+    opacity?: number;
+    // Slide scale
+    scale?: number;
+    // Enables slide shadow
+    shadow?: boolean;
+    // Transform origin, e.g. `left bottom`
+    origin?: string;
+}
+----
+
+|link:#param-progressMultiplier[progressMultiplier] |number |1 |Allows
+to multiply slides transformations and opacity.
+
+|link:#param-shadowPerProgress[shadowPerProgress] |boolean |`false`
+|Splits shadow "opacity" per slide based on `limitProgress` (only if
+transformation shadows enabled). E.g. setting `limitProgress: 2` and
+enabling `shadowPerProgress`, will set shadow opacity to `0.5` and
+`1` on two slides next to active. With this parameter disabled, all
+slides beside active will have shadow with `1` opacity
+
+|===
+
+
+[role="mt-5"]
+[[swiper-module-thumbs]]
+=== Thumbs
+
+In SwiperJS, the Thumbs module enables to create a *thumbnail* navigation
+(slave) for (master) sliders.
+
+In addition to the SwiperJS <<Controller>> module the API comes with the
+*Thumbs module* that is designed to work with a additional (slave)
+*thumbs swiper* for a *more correct* way for *syncing* two swipers.
+
+[role="mt-4"]
+[[swiper-module-thumbs-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-autoScrollOffset[autoScrollOffset] |number |0 |Allows to
+set on which thumbs active slide from edge it should automatically move
+scroll thumbs. For example, if set to 1 and last visible thumb will be
+activated (1 from edge) it will auto scroll thumbs
+
+|link:#param-multipleActiveThumbs[multipleActiveThumbs] |boolean |`true`
+|When enabled multiple thumbnail slides may get activated
+
+|link:#param-slideThumbActiveClass[slideThumbActiveClass] |string
+|'swiper-slide-thumb-active' |Additional class that will be added to
+activated thumbs swiper slide
+
+|link:#param-swiper[swiper] |any |null |SwiperJS instance of swiper used
+as thumbs or object with SwiperJS API parameters to initialize thumbs swiper.
+
+|link:#param-thumbsContainerClass[thumbsContainerClass] |string
+|'swiper-thumbs' |Additional class that will be added to thumbs swiper
+|===
+
+[role="mt-4"]
+[[swiper-module-thumbs-properties]]
+==== Properties
+
+[cols=",,",]
+|===
+|Properties | |
+
+|link:#prop-swiper-swiper[swiper.swiper] |any |SwiperJS instance of
+thumbs swiper
+
+|===
+
+[role="mt-4"]
+[[swiper-module-thumbs-methods]]
+==== Methods
+
+cols=",,",]
+|===
+|link:#method-swiper-init[swiper.init()] | |Initialize thumbs
+
+|link:#method-swiper-update[swiper.update([.text-orange]#initial#)] |
+|Update thumbs
+
+|===
+
+
+[role="mt-5"]
+[[swiper-module-zoom]]
+=== Zoom
+
+SwiperJSsupports zoom images functionality (similar to what you see on
+iOS when browsing single photo) where you can zoom-in image by pinch
+gesture and or by zoom-in/out by double tap on it. In this case,
+additional layout is required:
+
+[source, html]
+----
+<div class="swiper">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">
+      <div class="swiper-zoom-container">
+        <img src="path/to/image1.jpg" />
+      </div>
+    </div>
+    <div class="swiper-slide">
+      <div class="swiper-zoom-container">
+        <img src="path/to/image2.jpg" />
+      </div>
+    </div>
+    <div class="swiper-slide">Plain slide with text</div>
+    <div class="swiper-slide">
+      <!-- Override maxRatio parameter -->
+      <div class="swiper-zoom-container" data-swiper-zoom="5">
+        <img src="path/to/image1.jpg" />
+      </div>
+    </div>
+  </div>
+</div>
+----
+
+* All "zoomable" images should be wrapped with the div with
+`swiper-zoom-container` class.
+* By default it expects to zoom one of the `img`, `picture` or
+`canvas` element. If you want to make zoom on some other custom
+element, then just add `swiper-zoom-target` class to this element. For
+example:
++
+[source, html]
+----
+<div class="swiper">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">
+      <div class="swiper-zoom-container">
+        <!-- custom zoomable element -->
+        <div
+          class="swiper-zoom-target"
+          style="background-image: url(...)"
+          ></div>
+      </div>
+    </div>
+  </div>
+</div>
+----
+* You can override `maxRatio` parameter for specific slides by using
+`data-swiper-zoom` attribute on zoom container.
+
+[role="mt-4"]
+[[swiper-module-zoom-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-containerClass[containerClass] |string
+|'swiper-zoom-container' |CSS class name of zoom container
+
+|link:#param-limitToOriginalSize[limitToOriginalSize] |boolean |`false`
+|When set to true, the image will not be scaled past 100% of its
+original size
+
+|link:#param-maxRatio[maxRatio] |number |3 |Maximum image zoom
+multiplier
+
+|link:#param-minRatio[minRatio] |number |1 |Minimal image zoom
+multiplier
+
+|link:#param-panOnMouseMove[panOnMouseMove] |boolean |`false` |When set to
+true, a zoomed in image will automatically pan while moving the mouse
+over the image
+
+|link:#param-toggle[toggle] |boolean |`true` |Enable/disable zoom-in by
+slide's double tap
+
+|link:#param-zoomedSlideClass[zoomedSlideClass] |string
+|'swiper-slide-zoomed' |CSS class name of zoomed in container
+|===
+
+[role="mt-4"]
+[[swiper-module-zoom-methods]]
+==== Methods
+
+[cols=",,",]
+|===
+|Properties | |
+
+|link:#prop-swiper-enabled[swiper.enabled] |boolean |Whether the zoom
+module is enabled
+
+|link:#prop-swiper-scale[swiper.scale] |number |Current image scale
+ratio
+
+|Methods | |
+
+|link:#method-swiper-disable[swiper.disable()] | |Disable zoom module
+
+|link:#method-swiper-enable[swiper.enable()] | |Enable zoom module
+
+|link:#method-swiper-in[swiper.in([.text-orange]#ratio#)] | |Zoom in
+image of the currently active slide. Optionally accepts custom zoom
+ratio
+
+|link:#method-swiper-out[swiper.out()] | |Zoom out image of the
+currently active slide
+
+|link:#method-swiper-toggle[swiper.toggle([.text-orange]#event#)] |
+|Toggle image zoom of the currently active slide
+|===
+
+[role="mt-4"]
+[[swiper-module-zoom-events]]
+==== Events
+
+The module allows you to zoom in and out of images *within* a slider.
+*Zoom Events* likely refers to *custom events* you might create or utilize
+within a SwiperJS implementation to:
+
+* Trigger actions when zooming begins, ends, or changes.
+* Coordinate with other parts of your application based on zoom levels.
+* Enhance user interactions with dynamic effects or UI updates.
+
+[cols=",,",options="header",]
+|===
+|Name |Arguments |Description \| Example
+|link:#event-zoomChange[zoomChange] |(swiper, scale, imageEl, slideEl)
+|Event will be fired on zoom change
+|===
+
+
+[role="mt-5"]
+[[swiper-module-keyboard-control]]
+=== Keyboard Control
+
+The Keyboard Control module in SwiperJS enables *navigation* through slides
+using the keyboard. Here's a breakdown of its key functionalities:
+
+Default Keys::
+Typically uses arrow keys (left/right) to navigate between slides.
+
+Customizable::
+You can potentially configure it to use other keys if needed.
+
+Viewport Control::
+This option allows you to control whether keyboard navigation works only
+when the SwiperJS instance is within the viewport. This can be useful to
+prevent *accidental navigation* when the swiper is off-screen.
+
+
+[role="mt-4"]
+[[swiper-module-keyboard-control-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-enabled[enabled] |boolean |`false` |Set to `true` to enable
+keyboard control
+
+|link:#param-onlyInViewport[onlyInViewport] |boolean |`true` |When enabled
+it will control sliders that are currently in viewport
+
+|link:#param-pageUpDown[pageUpDown] |boolean |`true` |When enabled it will
+enable keyboard navigation by Page Up and Page Down keys
+|===
+
+[role="mt-4"]
+[[swiper-module-keyboard-control-methods]]
+==== Methods
+
+[cols=",,",]
+|===
+|Properties | |
+
+|link:#prop-swiper-enabled[swiper.enabled] |boolean |Whether the
+keyboard control is enabled
+
+|Methods | |
+
+|link:#method-swiper-disable[swiper.disable()] | |Disable keyboard
+control
+
+|link:#method-swiper-enable[swiper.enable()] | |Enable keyboard control
+|===
+
+[role="mt-4"]
+[[swiper-module-keyboard-control-events]]
+==== Events
+
+[cols=",,",options="header",]
+|===
+|Name |Arguments |Description \| Example
+|link:#event-keyPress[keyPress] |(swiper, keyCode) |Event will be fired
+on key press
+|===
+
+
+[role="mt-5"]
+[[swiper-module-mousewheel-control]]
+=== Mousewheel Control
+
+The Mousewheel Control module in SwiperJS enables users to navigate
+through the slides of a SwiperJS instance using their mouse wheel. Here's a
+breakdown of its key functionalities:
+
+Smooth Scrolling::
+Allows for smooth and intuitive navigation through slides by scrolling
+the mouse wheel.
+
+Configurable::
+Offers options to customize mousewheel behavior, such as:
+
+* releaseOnEdges: Allows page scrolling when the swiper reaches
+  the beginning or end.
+
+* invert: Inverts the scrolling direction e.g. for scrolling up moves to
+  the next slide.
+
+Axis Control::
+Can be configured to *restrict* mousewheel *scrolling* to a defined
+axis, e.g. for only *horizontal* scrolling in horizontal mode.
+
+
+[role="mt-4"]
+[[swiper-module-mousewheel-control-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-enabled[enabled] |boolean |`false` |Set to `true` to enable
+mousewheel control
+
+|link:#param-eventsTarget[eventsTarget] |any |'container' |String with
+CSS selector or HTML element of the container accepting mousewheel
+events. By default it is swiper
+
+|link:#param-forceToAxis[forceToAxis] |boolean |`false` |Set to `true`
+to force mousewheel swipes to axis. So in horizontal mode mousewheel
+will work only with horizontal mousewheel scrolling, and only with
+vertical scrolling in vertical mode.
+
+|link:#param-invert[invert] |boolean |`false` |Set to `true` to invert
+sliding direction
+
+|link:#param-noMousewheelClass[noMousewheelClass] |string
+|'swiper-no-mousewheel' |Scrolling on elements with this class will be
+ignored
+
+|link:#param-releaseOnEdges[releaseOnEdges] |boolean |`false` |Set to
+`true` and swiper will release mousewheel event and allow page
+scrolling when swiper is on edge positions (in the beginning or in the
+end)
+
+|link:#param-sensitivity[sensitivity] |number |1 |Multiplier of
+mousewheel data, allows to tweak mouse wheel sensitivity
+
+|link:#param-thresholdDelta[thresholdDelta] |null \| number |null
+|Minimum mousewheel scroll delta to trigger swiper slide change
+
+|link:#param-thresholdTime[thresholdTime] |null \| number |null |Minimum
+mousewheel scroll time delta (in ms) to trigger swiper slide change
+|===
+
+[role="mt-4"]
+[[swiper-module-mousewheel-control-methods]]
+==== Methods
+
+[cols=",,",]
+|===
+|Properties | |
+
+|link:#prop-swiper-enabled[swiper.enabled] |boolean |Whether the
+mousewheel control is enabled
+
+|Methods | |
+
+|link:#method-swiper-disable[swiper.disable()] | |Disable mousewheel
+control
+
+|link:#method-swiper-enable[swiper.enable()] | |Enable mousewheel
+control
+|===
+
+[role="mt-4"]
+[[swiper-module-mousewheel-control-events]]
+==== Events
+
+[cols=",,",options="header",]
+|===
+|Name |Arguments |Description \| Example
+|link:#event-scroll[scroll] |(swiper, event) |Event will be fired on
+mousewheel scroll
+|===
+
+
+[role="mt-5"]
+[[swiper-module-virtual-slides]]
+=== Virtual Slides
+
+Virtual Slides module allows to keep just required amount of slides in
+DOM. It is very useful in terms in performance and memory issues if you
+have a lot of slides, especially slides with heavyweight DOM tree or
+images.
+
+[NOTE]
+====
+Virtual Slides *doesn't work* with *Grid* module and if parameter
+`slidesPerView` is set to _auto_.
+====
+
+[role="mt-4"]
+[[swiper-module-virtual-slides-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-addSlidesAfter[addSlidesAfter] |number |0 |Increases amount
+of pre-rendered slides after active slide
+
+|link:#param-addSlidesBefore[addSlidesBefore] |number |0 |Increases
+amount of pre-rendered slides before active slide
+
+|link:#param-cache[cache] |boolean |`true` |Enables DOM cache of rendering
+slides html elements. Once they are rendered they will be saved to cache
+and reused from it.
+
+|link:#param-enabled[enabled] |boolean |`false` |Whether the virtual
+slides are enabled
+
+|link:#param-renderExternal[renderExternal]
+|function([.text-primary]#data#) | a|
+Function for external rendering (e.g. using some other library to handle
+DOM manipulations and state like *React.js* or *Vue.js*). As an argument it
+accepts `data` object with the following properties:
+
+* `offset`, slides left/top offset in px
+* `from`, index of first slide required to be rendered
+* `to`, index of last slide required to be rendered
+* `slides`, array with slide items to be rendered
+
+|link:#param-renderExternalUpdate[renderExternalUpdate] |boolean |`true`
+|When enabled (by default) it will update swiper layout right after
+renderExternal called. Useful to disable and update swiper manually when
+used with render libraries that renders asynchronously
+
+|link:#param-renderSlide[renderSlide] |function([.text-primary]#slide#,
+[.text-primary]#index#) | |Function to render slide. As an argument it
+accepts current slide item for `slides` array and index number of the
+current slide. Function must return an outer HTML of the swiper slide or
+slide HTML element.
+
+|link:#param-slides[slides] |T[] |[] |Array with slides
+|===
+
+[role="mt-4"]
+[[swiper-module-virtual-slides-methods]]
+==== Methods
+
+[width="100%",cols="34%,33%,33%",]
+|===
+|Properties | |
+
+|link:#prop-swiper-cache[swiper.cache] |object |Object with cached
+slides HTML elements
+
+|link:#prop-swiper-from[swiper.from] |number |Index of first rendered
+slide
+
+|link:#prop-swiper-slides[swiper.slides] |[.text-green]#T[]# |Array with
+slide items passed by `virtual.slides` parameter
+
+|link:#prop-swiper-to[swiper.to] |number |Index of last rendered slide
+
+|Methods | |
+
+|link:#method-swiper-appendSlide[swiper.appendSlide([.text-orange]#slide#)]
+| a|
+Append slide. `slides` can be a single slide item or array with such
+slides.
+
+____
+Only for Core version (in React & Vue it should be done by modifying
+slides array/data/source)
+____
+
+|link:#method-swiper-prependSlide[swiper.prependSlide([.text-orange]#slide#)]
+| a|
+Prepend slide. `slides` can be a single slide item or array with such
+slides.
+
+____
+Only for Core version (in React & Vue it should be done by modifying
+slides array/data/source)
+____
+
+|link:#method-swiper-removeAllSlides[swiper.removeAllSlides()] | a|
+Remove all slides
+
+____
+Only for Core version (in React & Vue it should be done by modifying
+slides array/data/source)
+____
+
+|link:#method-swiper-removeSlide[swiper.removeSlide([.text-orange]#slideIndexes#)]
+| a|
+Remove specific slide or slides. `slideIndexes` can be a number with
+slide index to remove or array with indexes.
+
+____
+Only for Core version (in React & Vue it should be done by modifying
+slides array/data/source)
+____
+
+|link:#method-swiper-update[swiper.update([.text-orange]#force#)] |
+|Update virtual slides state
+|===
+
+[role="mt-4"]
+[[swiper-module-virtual-slides-dom]]
+==== DOM
+
+Since version 9, SwiperJS virtual slides can work with slides originally
+rendered in DOM. On initialize it will remove them from DOM, cache and
+then re-use the ones which are required:
+
+[source, html]
+----
+<div class="swiper">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">Slide 1</div>
+    <div class="swiper-slide">Slide 2</div>
+    ...
+    <div class="swiper-slide">Slide 100</div>
+  </div>
+</div>
+
+<script>
+  const swiper = new Swiper('.swiper', {
+    virtual: {
+    enabled: true
+    }
+  });
+</script>
+----
+
+[role="mt-5"]
+[[swiper-module-hash-navigation]]
+=== Hash Navigation
+
+Hash navigation is intended to have a link to specific slide that allows
+to load page with specific slide opened.
+
+To make it work, you need to enable it by passing:
+
+* `hashNavigation: true` parameter and adding slides hashes in
+* `data-hash` attribute:
+
+[source, html]
+----
+<div class="swiper">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide" data-hash="slide1">Slide 1</div>
+    <div class="swiper-slide" data-hash="slide2">Slide 2</div>
+    <div class="swiper-slide" data-hash="slide3">Slide 3</div>
+    <div class="swiper-slide" data-hash="slide4">Slide 4</div>
+    <div class="swiper-slide" data-hash="slide5">Slide 5</div>
+    ...
+  </div>
+</div>
+----
+
+[source, js]
+----
+const swiper = new Swiper('.swiper', {
+    //enable hash navigation
+    hashNavigation: true
+});
+----
+
+[role="mt-4"]
+[[swiper-module-hash-navigation-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|link:#param-getSlideIndex[getSlideIndex]
+|function([.text-primary]#swiper#, [.text-primary]#hash#) | |Designed to
+be used with Virtual slides when it is impossible to find slide in DOM
+by hash (e.g. not yet rendered)
+
+|link:#param-replaceState[replaceState] |boolean |`false` |Works in
+addition to hashnav to replace current url state with the new one
+instead of adding it to history
+
+|link:#param-watchState[watchState] |boolean |`false` |Set to `true` to
+enable also navigation through slides (when hashnav is enabled) by
+browser history or by setting directly hash on document location
+|===
+
+[role="mt-4"]
+[[swiper-module-hash-navigation-events]]
+==== Events
+
+[cols=",,",options="header",]
+|===
+|Name |Arguments |Description \| Example
+|link:#event-hashChange[hashChange] |(swiper) |Event will be fired on
+window hash change
+
+|link:#event-hashSet[hashSet] |(swiper) |Event will be fired when swiper
+updates the hash
+|===
+
+[role="mt-5"]
+[[swiper-module-history-navigation]]
+=== History Navigation
+
+The History Navigation module in SwiperJS allows you to integrate Swiper
+with *history* of your browser. This means, when you navigate between slides
+in your Swiper, the browser's URL will be updated to reflect the current
+slide. This is useful for:
+
+Browser back/forward buttons:: Users can navigate through the slides
+using their browser's back and forward buttons, providing a familiar and
+intuitive user experience.
+
+Bookmarking specific slides::
+Users can easily bookmark a particular slide and return to it later.
+
+Sharing specific slides::
+Sharing the URL of a specific slide with others allows them to directly
+access that slide.
+
+SEO:: Search engines can index *individual slides* and potentially this may
+*improve* your website's *search rank*.
+
+[role="mt-4"]
+[[swiper-module-history-navigation-parameters]]
+==== Parameters
+
+[cols="2,2,2,6a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`enabled`
+|boolean
+|`false`
+|Enables the History Plugin.
+
+|`keepQuery`
+|boolean
+|`false`
+|Keep query parameters when changing browser url.
+
+|`key`
+|string
+|_slides_
+|URL key for slides.
+
+|`replaceState`
+|boolean
+|`false`
+|Works in addition to hashnav or history to replace current url state
+with the new one instead of adding it to history.
+
+|`root`
+|string
+|empty string
+|swiper page root, useful to specify when you use SwiperJS history mode
+not on root website page. For example can be `https://my-website.com/` or
+`https://my-website.com/subpage/` or `/subpage/`
+|===
+
+
+[role="mt-5"]
+[[swiper-module-controller]]
+=== Controller
+
+In SwiperJS, the Controller module allows to *synchronize* the *movement*
+of one or *multiple* slider instances. This is incredibly useful for
+creating complex, *interconnected* slider experiences. Here's a breakdown of
+its key functionalities:
+
+Master/Slave Relationship::
+You designate one swiper instance as the *master* and others as *slaves*.
+
+Synchronized Slides::
+When the *master* swiper *changes* slides, the slave swipers automatically
+move to the *corresponding* position.
+
+Inverse Control::
+You can configure the slaves to move in the *opposite* direction of the
+master.
+
+By Slide or by Progress::
+Control can be based on the *slide index* of the master or its overall
+*progress percentage*.
+
+
+[role="mt-4"]
+[[swiper-module-controller-parameters]]
+==== Parameters
+
+Find all available *parameters* available for a *Controller*.
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`by`
+|_slide_ \| _container_
+|_slide_
+|Defines, as a *string*, to *control* another slider or (multiple sliders)
+slide by slide. With respect to other slider's *grid* or depending on all
+sliders *container*, depending on total slider percentage.
+
+|`control`
+|any
+|*no default*
+|Pass another sniper instance or an *array* of (multiple) sniper instances
+that should be controlled by this swiper. Also accepts a *string* with a
+*CSS selector* or the *HTML Element*  of a swiper.
+
+|`inverse`
+|boolean
+|`false`
+|If set to `true`, the controlling *direction* will be *inverted*.
+
+|===
+
+[role="mt-4"]
+[[swiper-module-controller-methods]]
+==== Methods
+
+Find all available *methods* available for a *Controller*.
+
+[role="mt-4"]
+[[swiper-module-controller-methods-control]]
+===== control
+
+Pass an other swiper instance or an *array* of (multiple) instances that
+should be *controlled* by this swiper.
+
+[cols="6a,6a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Synopsis |Description \| Parameters
+
+|
+[source, js]
+----
+// single instance
+swiper.control(instance);
+
+// multiple instances
+swiper.control(instances[]);
+----
+
+|Pass an other swiper instance or an *array* of (multiple) swiper instances
+that should be *controlled* by this swiper.
+
+|===
+
+
+[role="mt-5"]
+[[swiper-modules-a11y]]
+=== Accessibility (a11y)
+
+Enable and configure *Accessibility* (a11y) module features of SwiperJS
+available for **screen readers** and other *assistive technologies*. By using
+the parameter and its options, you can *significantly enhance* the
+accessibility for *users with disabilities*:
+
+Keyboard Navigation::
+Enables users to navigate slides using keyboard arrows.
+
+Screen Reader Support::
+Provides meaningful information to *screen readers* about the slider,
+such as the number of slides and the current slide.
+
+Customizable Messages::
+Allows you to provide custom messages for *screen readers*, improving
+user experience.
+
+[role="mt-4"]
+[[swiper-modules-a11y-parameters]]
+==== Parameters
+
+[cols="3,2,3,4a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`containerMessage`
+|null \| string
+|null
+|Message for *screen readers* for *outer* swiper container.
+
+|`containerRole`
+|null \| string
+|null
+|Value of the *role attribute* to be set on the *swiper container*.
+
+|`containerRoleDescriptionMessage`
+|null \| string
+|null
+|Message for *screen readers* describing the role of *outer* swiper container.
+
+|`enabled`
+|boolean
+|`true`
+|Enables the Accessibility Module (a11y).
+
+|`firstSlideMessage`
+|string
+|_This is the first slide_
+|Message for *screen readers* for *previous button* when swiper
+is on *first slide*.
+
+|`id`
+|null \| string \| number
+|null
+|Value of the id attribute to be set on *swiper-wrapper*. If set to
+`null` the *id* will be *generated automatically*.
+
+|`itemRoleDescriptionMessage`
+|null \| string
+|null
+|Message for *screen readers* describing *the role* of a slide element.
+
+|`lastSlideMessage`
+|string
+|_This is the last slide_
+|Message for *screen readers* for *next button* when swiper
+is on *last slide*.
+
+|`nextSlideMessage`
+|string
+|_Next slide_
+|Message for *screen readers* for the *next button*.
+
+|`notificationClass`
+|string
+|_swiper-notification_
+|*CSS class name* of A11y notification.
+
+|`paginationBulletMessage`
+|string
+|_Go to slide **{{index}}**_
+|Message for *screen readers* for *single pagination bullet*.
+
+|`prevSlideMessage`
+|string
+|_Previous slide_
+|Message for *screen readers* for the *previous button*.
+
+|`scrollOnFocus`
+|boolean
+|`true`
+|Enables *scrolling* to the slide that has been *focused*.
+
+|`slideLabelMessage`
+|string
+|_**{{index}}**_ \| _**{{slidesLength}}**_
+|Message for *screen readers* describing the label of the *slide element*.
+
+|`slideRole`
+|string
+|_group_
+|Value of swiper slide *role attribute*.
+
+|===