j1-template 2024.3.17 → 2024.3.18

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

@@ -7,9 +7,13 @@ https://swiperjs.com/swiper-api[Swiper Documentation, {browser-window--new}].
 
 
 [role="mt-4"]
+[[options-pagination]]
 === pagination
 
-Configure the *Pagination module* for a swiper slider.
+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]
 ====
@@ -17,8 +21,10 @@ Find all available configurable *settings* with <<Pagination>> in section
 <<Modules>>.
 ====
 
+Find below an example how to configure the *Pagination module* for a SwiperJS
+slider.
 
-[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
 
@@ -30,7 +36,7 @@ default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   pagination: {
     el: '.swiper-pagination',
     type: 'bullets',
@@ -42,11 +48,21 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-parallax]]
 === parallax
 
+The Parallax module supports parallax transition effects for SwiperJS silder
+*slides* and nested elements.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Parallax>> in section
+<<Modules>>.
+====
+
 Configure parallax effect for a swipe slider.
 
-[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
 
@@ -58,20 +74,20 @@ default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   parallax: true
 });
-
 ----
 
 |===
 
 [role="mt-4"]
+[[options-passiveListeners]]
 === passiveListeners
 
 Configure *passive* event listeners.
 
-[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
 
@@ -86,11 +102,12 @@ this parameter.
 |===
 
 [role="mt-4"]
+[[options-preventClicks]]
 === preventClicks
 
 Prevent unwanted clicks on links during swiping.
 
-[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
 
@@ -102,11 +119,12 @@ Prevent unwanted clicks on links during swiping.
 |===
 
 [role="mt-4"]
+[[options-preventClicksPropagation]]
 === preventClicksPropagation
 
 Stop *click event* propagation on links during swiping.
 
-[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
 
@@ -118,12 +136,13 @@ Stop *click event* propagation on links during swiping.
 |===
 
 [role="mt-4"]
+[[options-preventInteractionOnTransition]]
 === preventInteractionOnTransition
 
 Allow to change slides by swiping or *navigation* \| *pagination* buttons
 during transition.
 
-[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
 
@@ -136,11 +155,12 @@ navigation/pagination buttons during transition.
 |===
 
 [role="mt-4"]
+[[options-resistance]]
 === resistance
 
 Enable or disable resistant bounds.
 
-[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
 
@@ -152,11 +172,12 @@ Enable or disable resistant bounds.
 |===
 
 [role="mt-4"]
+[[options-resistanceRatio]]
 === resistanceRatio
 
 Control resistance 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
 
@@ -168,12 +189,13 @@ Control resistance ratio.
 |===
 
 [role="mt-4"]
+[[options-resizeObserver]]
 === resizeObserver
 
 Configure *ResizeObserver* (if supported by browser) on swiper container
 to detect container resize.
 
-[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,11 +209,12 @@ window resize).
 |===
 
 [role="mt-4"]
+[[options-rewind]]
 === rewind
 
 Enable *rewind* 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
 
@@ -212,12 +235,13 @@ Should not be used together with `loop` mode.
 |===
 
 [role="mt-4"]
+[[options-roundLengths]]
 === roundLengths
 
 Enable to round values of slides *width and height* to prevent blurry texts
 on usual *resolution screens*.
 
-[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
 
@@ -230,12 +254,13 @@ blurry texts on usual resolution screens (if you have such).
 |===
 
 [role="mt-4"]
+[[options-runCallbacksOnInit]]
 === runCallbacksOnInit
 
 Fire *Transition* \| *SlideChange* \| *Start* \| *End* events on swiper
 initialization.
 
-[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 +274,22 @@ initialSlide is *not 0*, or you use *loop mode*.
 |===
 
 [role="mt-4"]
+[[options-scrollbar]]
 === scrollbar
 
-Configure scrollbar parameters  to enable with default settings.
+The Scrollbar module in SwiperJS is a powerful tool that enhances user
+interaction and provides visual feedback within a SwiperJS slider.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Scrollbar>> in section
+<<Mdules>>.
+====
+
+Find below how to configure scrollbar parameters to enable with default
+settings.
 
-[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 +301,7 @@ default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   scrollbar: {
     el: '.swiper-scrollbar',
     draggable: true
@@ -276,11 +312,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-setWrapperSize]]
 === setWrapperSize
 
 Set *width* \| *height* on swiper 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
 
@@ -294,11 +331,12 @@ fallback option for browser that don't support flexbox layout well.
 |===
 
 [role="mt-4"]
+[[options-shortSwipes]]
 === shortSwipes
 
 Disable short 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
 
@@ -310,11 +348,12 @@ Disable short swipes.
 |===
 
 [role="mt-4"]
+[[options-simulateTouch]]
 === simulateTouch
 
 Enable or disable Swiper mouse events like 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
 
@@ -328,11 +367,12 @@ and drag to change slides).
 
 
 [role="mt-4"]
+[[options-slideActiveClass]]
 === slideActiveClass
 
 Set CSS class name of the *active slide*.
 
-[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 +392,12 @@ changed classes.
 |===
 
 [role="mt-4"]
+[[options-slideBlankClass]]
 === slideBlankClass
 
 Configre CSS class name blank 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
 
@@ -374,11 +415,12 @@ Not supported in Swiper _React_ and _Vue_ environments.
 |===
 
 [role="mt-4"]
+[[options-slideClass]]
 === slideClass
 
 Configre CSS class name for blank 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
 
@@ -398,11 +440,12 @@ changed classes.
 |===
 
 [role="mt-4"]
+[[options-slideFullyVisibleClass]]
 === slideFullyVisibleClass
 
 Configre CSS class name for *blank* 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
 
@@ -420,11 +463,12 @@ slide.
 |===
 
 [role="mt-4"]
+[[options-slideNextClass]]
 === slideNextClass
 
 Configre CSS class name of the slide which is right *after* the *active* slide.
 
-[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
 
@@ -444,11 +488,12 @@ changed classes.
 |===
 
 [role="mt-4"]
+[[options-slidePrevClass]]
 === slidePrevClass
 
 Configre CSS class name of the slide which is right *before* the *active* slide.
 
-[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
 
@@ -468,11 +513,12 @@ changed classes
 |===
 
 [role="mt-4"]
+[[options-slideToClickedSlide]]
 === slideToClickedSlide
 
 Enable click on any slide to trigger a *transition*.
 
-[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
 
@@ -484,12 +530,13 @@ Enable click on any slide to trigger a *transition*.
 |===
 
 [role="mt-4"]
+[[options-slideVisibleClass]]
 === slideVisibleClass
 
 Set the CSS class name of the currently *active* or *partially*
 visible slide.
 
-[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
 
@@ -509,12 +556,13 @@ changed classes.
 |===
 
 [role="mt-4"]
+[[options-slidesOffsetAfter]]
 === slidesOffsetAfter
 
 Set additional slide offset (in px) at the end of the container *after*
 all slides configured.
 
-[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
 
@@ -527,12 +575,13 @@ all slides configured.
 |===
 
 [role="mt-4"]
+[[options-slidesOffsetBefore]]
 === slidesOffsetBefore
 
 Set additional slide offset (in px) in the beginning of the container *before*
 all slides configured.
 
-[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
 
@@ -545,11 +594,12 @@ all slides configured.
 |===
 
 [role="mt-4"]
+[[options-slidesPerGroup]]
 === slidesPerGroup
 
 Set numbers of slides for *group 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
 
@@ -562,13 +612,14 @@ Parameter set *larger* than *1*.
 |===
 
 [role="mt-4"]
+[[options-slidesPerGroupAuto]]
 === slidesPerGroupAuto
 
 Set number of slides for *group sliding* to skip all slides in view on
 `.slideNext()` \| `.slidePrev()` methods calls, on Navigation *button*
 clicks in *autoplay*.
 
-[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
 
@@ -583,11 +634,12 @@ clicks in *autoplay*.
 |===
 
 [role="mt-4"]
+[[options-slidesPerGroupSkip]]
 === slidesPerGroupSkip
 
 Set number of slides for *group sliding* to skip 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
 
@@ -605,11 +657,12 @@ grouped by the `slidesPerGroup` value.
 |===
 
 [role="mt-4"]
+[[options-slidesPerView]]
 === slidesPerView
 
 Set the number of slides visible per view on a slider.
 
-[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
 
@@ -627,18 +680,19 @@ when `grid.row` is set larger than *1*.
 |===
 
 [role="mt-4"]
+[[options-spaceBetween]]
 === spaceBetween
 
-Set the distance between slides in px.
+Set Gutters (space) in between the slides 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
 
 |`spaceBetween`
 |string \| number
 |0
-|Distance between slides in px..
+|Set Gutters (space) in between the slides in px.
 
 [CAUTION]
 ====
@@ -649,11 +703,12 @@ which you pass `spaceBetween` into, navigation might *not work* properly.
 |===
 
 [role="mt-4"]
+[[options-speed]]
 === speed
 
 Set Duration of transition between slides in ms.
 
-[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
 
@@ -665,12 +720,13 @@ Set Duration of transition between slides in ms.
 |===
 
 [role="mt-4"]
+[[options-swipeHandler]]
 === swipeHandler
 
 Set the CSS selector \| HTML element for *swiping* of the the swiper
 container.
 
-[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
 
@@ -683,11 +739,12 @@ container.
 |===
 
 [role="mt-4"]
+[[options-swiperElementNodeName]]
 === swiperElementNodeName
 
 Set the name of the swiper element node name.
 
-[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