j1-template 2024.3.17 → 2024.3.18

data/lib/starter_web/pages/public/_includes/documents/swiper/200_swiper_parameters_t_z.asciidoc

@@ -7,11 +7,12 @@ https://swiperjs.com/swiper-api[Swiper Documentation, {browser-window--new}].
 
 
 [role="mt-4"]
+[[options-threshold]]
 === threshold
 
 Set the threshold value in px then swiper will *not* move.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -24,12 +25,21 @@ then swiper will not move.
 |===
 
 [role="mt-4"]
+[[options-thumbs]]
 === thumbs
 
-Set the configuration (object) of thumbs component parameters for *thumb image*
-navigation.
+The Thumbs module enables to create a *thumbnail navigation* for SliderJS
+sliders.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[TIP]
+====
+Find all available configurable *settings* with <<Thumbs>> in section
+<<Mdules>>.
+====
+
+Find below how to enable the *thumbs* module and set the *thumbs* parameters.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -40,7 +50,7 @@ navigation.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // other parameters ...
   thumbs: {
     swiper: thumbsSwiper
@@ -51,11 +61,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-touchAngle]]
 === touchAngle
 
 Set Angle in degrees to trigger touch move.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -67,11 +78,12 @@ Set Angle in degrees to trigger touch move.
 |===
 
 [role="mt-4"]
+[[options-touchEventsTarget]]
 === touchEventsTarget
 
 Set the *target* element to listen on touch events.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -85,11 +97,12 @@ events on the swiper *wrapper*.
 |===
 
 [role="mt-4"]
+[[options-touchMoveStopPropagation]]
 === touchMoveStopPropagation
 
 Enable to *stop* the propagation of *touchmove*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -101,11 +114,12 @@ Enable to *stop* the propagation of *touchmove*.
 |===
 
 [role="mt-4"]
+[[options-touchRatio]]
 === touchRatio
 
 Set the touch ratio.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -117,11 +131,12 @@ Set the touch ratio.
 |===
 
 [role="mt-4"]
+[[options-touchReleaseOnEdges]]
 === touchReleaseOnEdges
 
 Enable touch events on slider edge positions for *page scrolling*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -143,11 +158,12 @@ Also *threshold* parameter must be set to *0*.
 |===
 
 [role="mt-4"]
+[[options-touchStartForcePreventDefault]]
 === touchStartForcePreventDefault
 
 Force to *prevent default* for `touchstart` or `pointerdown` events.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -163,7 +179,7 @@ Force to *prevent default* for `touchstart` or `pointerdown` events.
 
 Enable *prevent default* for `touchstart` or `pointerdown` events.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -176,11 +192,12 @@ by default.
 |===
 
 [role="mt-4"]
+[[options-uniqueNavElements]]
 === uniqueNavElements
 
 Disable navigation element parameters passed as a string like _.pagination_.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -195,12 +212,13 @@ buttons and *scrollbar* elements.
 |===
 
 [role="mt-4"]
+[[options-updateOnWindowResize]]
 === updateOnWindowResize
 
 Disable the recalculation of slide positions on window resize for desktops or
 orientation change on mobiles.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -213,12 +231,13 @@ orientation change (on mobiles).
 |===
 
 [role="mt-4"]
+[[options-url]]
 === url
 
 Required for *active* slide detection when rendered on server-side and
 history enabled.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -231,12 +250,13 @@ history enabled.
 |===
 
 [role="mt-4"]
+[[options-userAgent]]
 === userAgent
 
 Setting the *userAgent string* is required for browser or device detection
 when swiper is rendered on server-side.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -249,11 +269,23 @@ rendered on server-side.
 |===
 
 [role="mt-4"]
+[[options-virtual]]
 === virtual
 
-Enables and configures the *virtual slides* functionality.
+The Virtual Slides module allows you to keep the required number of slides
+in the DOM. The module is very useful in terms of performance and memory
+issues if you have a lot of slides, especially slides with heavyweight DOM
+trees or images.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Virtual Slides>> in section
+<<Mdules>>.
+====
+
+Find below how to enable and configures the *virtual slides* functionality.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -265,7 +297,7 @@ parameters or boolean `true` to enable with default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   virtual: {
     slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5']
   }
@@ -275,11 +307,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-virtualTranslate]]
 === virtualTranslate
 
 Useful when you need to create *custom* slide *transitions*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -298,12 +331,13 @@ Useful when you need to create *custom* slide *transitions*.
 |===
 
 [role="mt-4"]
+[[options-watchOverflow]]
 === watchOverflow
 
 When enabled, the swiper will be *disabled* and *hide navigation* buttons
 in case there are *not enough* slides for *sliding*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -316,12 +350,13 @@ in case there are *not enough* slides for *sliding*.
 |===
 
 [role="mt-4"]
+[[options-watchSlidesProgress]]
 === watchSlidesProgress
 
 When enabled, the swiper will be *disabled* and *hide navigation* buttons
 in case there are *not enough* slides for *sliding*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -338,11 +373,12 @@ Slides in viewport will have an *additional* visible class.
 |===
 
 [role="mt-4"]
+[[options-width]]
 === width
 
 Force the swiper width (in px).
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -362,11 +398,12 @@ Setting this parameter will make Swiper *not responsive*.
 |===
 
 [role="mt-4"]
+[[options-wrapperClass]]
 === wrapperClass
 
 Set the CSS class name of the slides *wrapper*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -387,11 +424,12 @@ changed classes.
 
 
 [role="mt-4"]
+[[options-zoom]]
 === zoom
 
 Enables *zooming* functionality.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -403,7 +441,7 @@ Enables *zooming* functionality.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   zoom: {
     maxRatio: 5
   }