j1-template 2024.3.17 → 2024.3.18

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

@@ -5,13 +5,29 @@ List of available Swiper parameters (properties) alphabetically ordered
 from *L* to *O*. Find parameter settings also with the
 https://swiperjs.com/swiper-api[Swiper Documentation, {browser-window--new}].
 
+=== Lazy Loading
+
+The Lazy Loading module in SwiperJS controls the lazy loading of *images*
+within a swiper. Lazy loading means images are *not loaded* until they
+scroll into the browser's *visible area*. Using the module increases loading
+speed, especially for websites with many images, and thus improves the user
+experience.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Lazy Loading>> in section
+<<Mdules>>.
+====
+
+Find the available options for lazy loading below.
 
 [role="mt-4"]
-=== lazyPreloadPrevNext
+[[options-lazyPreloadPrevNext]]
+==== lazyPreloadPrevNext
 
 Number of next and previous slides to be preloaded.
 
-[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,11 +40,12 @@ Number of next and previous slides to be preloaded.
 |===
 
 [role="mt-4"]
-=== lazyPreloaderClass
+[[options-lazyPreloaderClass]]
+==== lazyPreloaderClass
 
 Set CSS class name of lazy preloader.
 
-[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
 
@@ -40,11 +57,12 @@ Set CSS class name of lazy preloader.
 |===
 
 [role="mt-4"]
+[[options-longSwipes]]
 === longSwipes
 
 Enable or disable long swipes.
 
-[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
 
@@ -56,11 +74,12 @@ Enable or disable long swipes.
 |===
 
 [role="mt-4"]
+[[options-longSwipesMs]]
 === longSwipesMs
 
 Set the minimal duration (in ms) to trigger long swipes.
 
-[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
 
@@ -73,11 +92,12 @@ during long swipes.
 |===
 
 [role="mt-4"]
+[[options-longSwipesRatio]]
 === longSwipesRatio
 
 Set the ratio to trigger swipe to next/previous slide during long swipes.
 
-[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
 
@@ -89,11 +109,12 @@ Set the ratio to trigger swipe to next/previous slide during long swipes.
 |===
 
 [role="mt-4"]
+[[options-loop]]
 === loop
 
 Enable or disable continuous loop mode.
 
-[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
 
@@ -111,12 +132,13 @@ total number of slides must be:
 |===
 
 [role="mt-4"]
+[[options-loopAddBlankSlides]]
 === loopAddBlankSlides
 
 Add blank slides if you use Grid or `slidesPerGroup` on total amount of
 slides is *not even* to `slidesPerGroup`.
 
-[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
 
@@ -130,11 +152,12 @@ and the total amount of slides is not even to `slidesPerGroup` or to
 |===
 
 [role="mt-4"]
+[[options-loopAdditionalSlides]]
 === loopAdditionalSlides
 
 Allows to increase amount of looped slides.
 
-[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
 
@@ -146,12 +169,13 @@ Allows to increase amount of looped slides.
 |===
 
 [role="mt-4"]
+[[options-loopPreventsSliding]]
 === loopPreventsSliding
 
 Set *slideNext* \| *slidePrev* to do nothing while slider is animating
 in *loop* mode.
 
-[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
 
@@ -164,11 +188,12 @@ in loop mode.
 |===
 
 [role="mt-4"]
+[[options-maxBackfaceHiddenSlides]]
 === maxBackfaceHiddenSlides
 
-Reduce visual *flicker* in Safari Browser.
+Reduce visual *flicker* in Apple's *Safari Browser*.
 
-[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
 
@@ -187,12 +212,14 @@ reduce performance.
 
 |===
 
+////
 [role="mt-4"]
+[[options-modules]]
 === modules
 
 Configure array with Swiper modules.
 
-[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
 
@@ -206,19 +233,32 @@ Configure array with Swiper modules.
 import Swiper from 'swiper';
 import { Navigation, Pagination } from 'swiper/modules';
 
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
     modules: [ Navigation, Pagination ]
 });
 ----
 
 |===
+////
+
 
 [role="mt-4"]
+[[options-mousewheel]]
 === mousewheel
 
-Enables or disbales navigation through slides using mouse wheel.
+The Mousewheel Control module in SwiperJS enables users to navigate through
+the slides of a SwiperJS instance using their mouse wheel.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Mousewheel Control>> in
+section <<Mdules>>.
+====
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+Find the available options for mousewheel control below to enables or disable
+navigation through slides using mouse wheel.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description
 
@@ -230,7 +270,7 @@ mousewheel parameters or boolean `true` to enable with default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   mousewheel: {
     invert: true
   }
@@ -240,11 +280,24 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-navigation]]
 === navigation
 
-Enables or disbales navigation through slides using mouse wheel.
+The Pagination module in SwiperJS is a powerful tool that allows you to add
+visual indicators (like buttons) to a SwiperJS slide. The navigation elements
+make it clear to users how many slides there are and which slide they are
+currently viewing.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Navigation>> in section
+<<Mdules>>.
+====
+
+Find the available options for navigation below to enable and configure the
+navigation (module).
 
-[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
 
@@ -256,7 +309,7 @@ default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev'
@@ -268,11 +321,12 @@ const swiper = new Swiper('.swiper', {
 
 
 [role="mt-4"]
+[[options-nested]]
 === nested
 
 Control Swiper for correct touch events interception.
 
-[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
 
@@ -285,11 +339,12 @@ swipers that use same direction as the parent one.
 |===
 
 [role="mt-4"]
+[[options-noSwiping]]
 === noSwiping
 
 Control *no* swiping on elements specified by (CSS) `noSwipingClass`.
 
-[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
 
@@ -302,11 +357,12 @@ Control *no* swiping on elements specified by (CSS) `noSwipingClass`.
 |===
 
 [role="mt-4"]
+[[options-noSwipingClass]]
 === noSwipingClass
 
 Specify (CSS) elements to disable swiping on.
 
-[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
 
@@ -319,11 +375,12 @@ Specify (CSS) elements to disable swiping on.
 
 
 [role="mt-4"]
+[[options-noSwipingSelector]]
 === noSwipingSelector
 
 Specify (CSS) elements to disable swiping on.
 
-[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
 
@@ -336,11 +393,12 @@ swiping on. For example `input` will disable swiping on all inputs.
 |===
 
 [role="mt-4"]
+[[options-normalizeSlideIndex]]
 === normalizeSlideIndex
 
 Normalize slide index.
 
-[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
 
@@ -352,11 +410,12 @@ Normalize slide index.
 |===
 
 [role="mt-4"]
+[[options-observeParents]]
 === observeParents
 
 Configure to watch *Mutations* for Swiper parent elements.
 
-[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
 
@@ -369,11 +428,12 @@ parent elements.
 |===
 
 [role="mt-4"]
+[[options-observeSlideChildren]]
 === observeSlideChildren
 
 Configure to watch *Mutations* for Swiper slide child elements.
 
-[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
 
@@ -386,11 +446,12 @@ child elements.
 |===
 
 [role="mt-4"]
+[[options-observer]]
 === observer
 
 Enable a *Mutation Observer* on Swiper and its elements.
 
-[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
 
@@ -405,11 +466,12 @@ its style (like hide/show) or modify its child elements
 |===
 
 [role="mt-4"]
+[[options-on]]
 === on
 
 Register event handlers.
 
-[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
 
@@ -420,7 +482,7 @@ Register event handlers.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   swiper.on('click', (swiper, event) => {
     // do something
   }
@@ -430,11 +492,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-onAny]]
 === onAny
 
 Register event handlers on *all* 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
 
@@ -445,7 +508,7 @@ Register event handlers on *all* events.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
@@ -456,11 +519,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-oneWayMovement]]
 === oneWayMovement
 
 Configure swipe slides only forward (one-way) regardless of swipe direction.
 
-[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