j1-template 2024.3.17 → 2024.3.19

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

@@ -5,6 +5,7 @@ from *A* to *K*. Find parameter settings also with the
 https://swiperjs.com/swiper-api[Swiper Documentation, {browser-window--new}].
 
 [role="mt-4"]
+[[options-a11y]]
 === a11y (Accessibility)
 
 Enable and configure the *Accessibility* (a11y) module with *default* settings.
@@ -17,7 +18,6 @@ Find all available configurable *settings* with <<Accessibility (a11y)>>
 in section <<Modules>>.
 ====
 
-// link:{swiper-modules--a11y}[Accessibility (a11y), {browser-window--new}]].
 
 [cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable"]
 |===
@@ -31,7 +31,7 @@ with *default* settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   a11y: {
     prevSlideMessage:   'Go to previous slide',
     nextSlideMessage:   'Go to next slide',
@@ -43,11 +43,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-allowslideNext]]
 === allowslideNext()
 
 Enable or disable swiping to next 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 \| Example
 
@@ -60,11 +61,12 @@ or bottom).
 |===
 
 [role="mt-4"]
+[[options-allowslidePrev]]
 === allowslidePrev()
 
 Enable or disable swiping to previous 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 \| Example
 
@@ -77,30 +79,13 @@ top).
 |===
 
 [role="mt-4"]
+[[options-allowTouchMove]]
 === allowTouchMove
 
 Control to switch slides by using API *methods* like *slidePrev()* or
 *slideNext()*.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
-|===
-|Name |Type |Default |Description \| Example
-
-|`allowTouchMove`
-|boolean
-|true
-|If `false`, then the only way to switch the slide is use of API *methods*
-like *slidePrev()* or *slideNext()*.
-
-|===
-
-[role="mt-4"]
-=== allowTouchMove
-
-Control to switch slides by using API *methods* like
-*slidePrev()* or *slideNext()*.
-
-[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 \| Example
 
@@ -113,12 +98,13 @@ like *slidePrev()* or *slideNext()*.
 |===
 
 [role="mt-4"]
+[[options-autoHeight]]
 === autoHeight
 
 Set the *slider wrapper* to adapt its height from the height of the
 currently 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 \| Example
 
@@ -131,6 +117,7 @@ the currently active slide.
 |===
 
 [role="mt-4"]
+[[options-autoplay]]
 === autoplay
 
 Enable and configure the Autoplay module for auto playing *behaviour* of a
@@ -142,7 +129,7 @@ Find all available configurable *settings* with <<Autoplay>> in
 section hModules>>.
 ====
 
-[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 \| Example
 
@@ -154,7 +141,7 @@ section hModules>>.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   autoplay: {
     delay: 5000
   }
@@ -164,11 +151,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-breakpoints]]
 === breakpoints
 
 Allows to set parameters for responsive breakpoints.
 
-[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 \| Example
 
@@ -187,7 +175,7 @@ Parameters like `loop` and `effect` won't work.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // Default parameters
   slidesPerView: 1,
   spaceBetween: 10,
@@ -214,7 +202,7 @@ const swiper = new Swiper('.swiper', {
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   slidesPerView: 1,
   spaceBetween: 10,
   // using "ratio" endpoints
@@ -238,11 +226,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-breakpointsBase]]
 === breakpointsBase
 
 Specify the base for breakpoints.
 
-[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 \| Example
 
@@ -256,11 +245,12 @@ then breakpoint keys treated as *swiper container width*.
 |===
 
 [role="mt-4"]
+[[options-cardsEffect]]
 === cardsEffect
 
 Specify Cards-effect parameters.
 
-[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 \| Example
 
@@ -271,7 +261,7 @@ Specify Cards-effect parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'cards',
   cardsEffect: {
     // ...
@@ -281,11 +271,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-centerInsufficientSlides]]
 === centerInsufficientSlides
 
 Enabe or disable to center 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 \| Example
 
@@ -303,11 +294,12 @@ Not intended to be used in `loop` mode and `grid.rows`.
 |===
 
 [role="mt-4"]
+[[options-centeredSlides]]
 === centeredSlides
 
 Control to center *active* 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 \| Example
 
@@ -320,6 +312,7 @@ side.
 |===
 
 [role="mt-4"]
+[[options-centeredSlidesBounds]]
 === centeredSlidesBounds
 
 Control to center *active* slides without adding gaps.
@@ -330,7 +323,7 @@ Not intended to be used with `loop` or `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 \| Example
 
@@ -351,11 +344,12 @@ Not intended to be used with `loop` or `pagination`.
 
 
 [role="mt-4"]
+[[options-containerModifierClass]]
 === containerModifierClass
 
 The *beginning* of the modifier CSS class  to center 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 \| Example
 
@@ -368,11 +362,19 @@ container depending on different parameters.
 |===
 
 [role="mt-4"]
+[[options-controller]]
 === controller
 
-Set Swiper *controller* parameters.
+The Controller module allows to *synchronize* the movement of *multiple*
+slider instances. Find below how to set Swiper *controller* parameters.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[TIP]
+====
+Find all available configurable *settings* with <<Controller>> in section
+<<Modules>>.
+====
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -384,7 +386,7 @@ Set Swiper *controller* parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   controller: {
     inverse: true
   }
@@ -394,11 +396,18 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-coverflowEffect]]
 === coverflowEffect
 
-Set Overflow Effect parameters.
+The Coverflow Effect module for SwiperJS creates a three-dimensional,
+fan-like effect for the slides in a Swiper container. This effect is inspired
+by the Coverflow view that you can see, for example, when selecting albums
+in _iTunes_.
+
+Find below how to set Coverflow Effect parameters.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+.Coverflow Effect Example
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -409,7 +418,7 @@ Set Overflow Effect parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'coverflow',
   coverflowEffect: {
     rotate: 30,
@@ -421,11 +430,13 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-createElements]]
 === createElements
 
 Control how to wrap slides by an swiper-wrapper element.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+.createElements Example
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -440,11 +451,15 @@ with boolean `true`).
 |===
 
 [role="mt-4"]
+[[options-creativeEffect]]
 === creativeEffect
 
-Set creative effect parameters.
+The creative effect module in SwiperJS generates creative and engaging visual
+effects for the slides in a Swiper. The module allows for various custom
+transformations to animate the slides dynamically as they transition between
+each 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 \| Example
 
@@ -455,7 +470,7 @@ Set creative effect parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'creative',
   creativeEffect: {
     prev: {
@@ -473,11 +488,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-cssMode]]
 === cssMode
 
 Enable or disable CSS *Scroll Snap API*.
 
-[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 \| Example
 
@@ -520,7 +536,7 @@ etc.), they should be set on `swiper-slide-transform` element instead.
 </div>
 
 <script>
-  const swiper = new Swiper('.swiper', {
+  const swiper = new Swiper('#swiper_id', {
     effect: 'flip',
     cssMode: true
   });
@@ -530,11 +546,12 @@ etc.), they should be set on `swiper-slide-transform` element instead.
 |===
 
 [role="mt-4"]
+[[options-cubeEffect]]
 === cubeEffect
 
 Set cube effect parameters.
 
-[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 \| Example
 
@@ -545,7 +562,7 @@ Set cube effect parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'cube',
   cubeEffect: {
     slideShadows: false
@@ -556,11 +573,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-direction]]
 === direction
 
 Set the direction for Swipoer sliders.
 
-[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 \| Example
 
@@ -572,9 +590,10 @@ Set the direction for Swipoer sliders.
 |===
 
 [role="mt-4"]
+[[options-edgeSwipeDetection]]
 === edgeSwipeDetection
 
-[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 \| Example
 
@@ -590,11 +609,12 @@ Windows devices with pointer (touch) events.
 |===
 
 [role="mt-4"]
+[[options-edgeSwipeThreshold]]
 === edgeSwipeThreshold
 
 Area (in px) from left edge of the screen to release 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 \| Example
 
@@ -607,11 +627,12 @@ swipe-back in app.
 |===
 
 [role="mt-4"]
+[[options-effect]]
 === effect
 
 Set slide transition effects.
 
-[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 \| Example
 
@@ -624,11 +645,12 @@ Set slide transition effects.
 |===
 
 [role="mt-4"]
+[[options-enabled]]
 === enabled
 
 Control if a Swiper slideshow is initially 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 \| Example
 
@@ -641,11 +663,12 @@ all navigation elements and won't respond to any events and interactions.
 |===
 
 [role="mt-4"]
+[[options-eventsPrefix]]
 === eventsPrefix
 
 Cntrol event name prefix for all Swiper DOM 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 \| Example
 
@@ -657,22 +680,34 @@ Cntrol event name prefix for all Swiper DOM events.
 |===
 
 [role="mt-4"]
+[[options-fadeEffect]]
 === fadeEffect
+The Fade Effect *module* in SwiperJS creates a smooth transition between each
+slide. Instead of sliding or sliding the slides like other effects do, the
+transition causes them to fade out and the next slide to fade in.
 
-Set fade effect parameters.
+[TIP]
+====
+Find all available configurable *settings* with <<Fade Effect>>
+in section <<Modules>>.
+====
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+Find below how to set Fade effect parameters.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
 |`fadeEffect`
 |any
 |*no default*
-|Object with Fade-effect parameters
+|The Fade Effect module in SwiperJS creates a smooth transition between each
+slide. Instead of sliding or sliding the slides like other effects do, the
+transition causes them to fade out and the next slide to fade in.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'fade',
   fadeEffect: {
     crossFade: true
@@ -683,11 +718,22 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-flipEffect]]
 === flipEffect
 
-Set flip effect parameters.
+The Flip Effect module in SwiperJS creates a special transition effect between
+individual slides. It gives the impression that the slides are being turned
+like cards.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[TIP]
+====
+Find all available configurable *settings* with <<Flip Effect>>
+in section <<Modules>>.
+====
+
+Find below how to set Flip effect parameters.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -698,7 +744,7 @@ Set flip effect parameters.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   effect: 'flip',
   flipEffect: {
     slideShadows: false
@@ -708,11 +754,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-focusableElements]]
 === focusableElements
 
 Set CSS selector for focusable 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 \| Example
 
@@ -725,11 +772,12 @@ such elements if they are *focused*.
 |===
 
 [role="mt-4"]
+[[options-followFinger]]
 === followFinger
 
 Set slider animated only when you release it.
 
-[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 \| Example
 
@@ -744,9 +792,19 @@ it will not move while you hold your finger on it.
 [role="mt-4"]
 === freeMode
 
-Enables or disables free mode functionality.
+The Free Mode module gives users a more fluid and interactive sliding
+experience.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[TIP]
+====
+Find all available configurable *settings* with <<Free Mode>>
+in section <<Modules>>.
+====
+
+Find below how to set Free Mode parameters.
+
+.Free Mode Example
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -758,11 +816,11 @@ boolean `true` to enable with *default* settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   freeMode: true
 });
 
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   freeMode: {
     enabled: true,
     sticky: true
@@ -773,11 +831,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-grabCursor]]
 === grabCursor
 
 Improve desktop usability by setting  the *grab cursor* when hover on Swiper.
 
-[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 \| Example
 
@@ -791,11 +850,20 @@ will see the *grab cursor* when hover on Swiper.
 
 
 [role="mt-4"]
+[[options-grid]]
 === grid
 
-Enable *multirow* slider.
+The Grid module in SwiperJS allows to create *multi-row* sliders, effectively
+arranging slides into a *grid-like* structure.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Grid>> in section <<Mdules>>.
+====
+
+Find below how to set Grid parameters to enable a *multirow* 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 \| Example
 
@@ -806,7 +874,7 @@ Enable *multirow* slider.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   grid: {
     rows: 2
   }
@@ -816,11 +884,15 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-hashNavigation]]
 === hashNavigation
 
-Enables or disables hash url navigation for slides.
+Hash navigation is intended to have a link to specific slide that allows to
+load a page with specific slide opened.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+Find below how to set Hash Navigation parameters.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -832,7 +904,7 @@ parameters or boolean `true` to enable with *default* settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   hashNavigation: {
     replaceState: true
   }
@@ -842,11 +914,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-height]]
 === height
 
 Force Swiper height.
 
-[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 \| Example
 
@@ -865,11 +938,22 @@ Setting this parameter will make Swiper *not responsive*.
 |===
 
 [role="mt-4"]
+[[options-history]]
 === history
 
-Enables history push state.
+The History (Navigation) module in SwiperJS allows you to integrate Swiper
+with history of the *browser*. This means, when users navigate between slides
+in a Swiper, the browser's URL will be updated to reflect the current slide.
+
+[TIP]
+====
+Find all available configurable *settings* with <<History Navigation>> in
+section <<Mdules>>.
+====
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+Find below how to set History Navigation parameters.
+
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -885,7 +969,7 @@ with default settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   history: {
     replaceState: true
   }
@@ -901,11 +985,12 @@ const swiper = new Swiper('.swiper', {
 |===
 
 [role="mt-4"]
+[[options-init]]
 === init
 
 Specify, if Swiper should be initialised automatically.
 
-[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 \| Example
 
@@ -919,11 +1004,12 @@ instance. If disabled, then you need to init it manually by calling
 |===
 
 [role="mt-4"]
+[[options-initialSlide]]
 === initialSlide
 
 Set the index number of the initial 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 \| Example
 
@@ -935,11 +1021,12 @@ Set the index number of the initial slide.
 |===
 
 [role="mt-4"]
+[[options-injectStyles]]
 === injectStyles
 
 Inject text styles to the shadow DOM.
 
-[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 \| Example
 
@@ -951,11 +1038,12 @@ Inject text styles to the shadow DOM.
 |===
 
 [role="mt-4"]
+[[options-injectStylesUrls]]
 === injectStylesUrls
 
 Inject styles `<link>`s to the shadow DOM.
 
-[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 \| Example
 
@@ -967,11 +1055,23 @@ Inject styles `<link>`s to the shadow DOM.
 |===
 
 [role="mt-4"]
+[[options-keyboard]]
 === keyboard
 
-Enables or disables navigation through slides using keyboard.
+The Keyboard (Control module) in SwiperJS enables navigation through slides
+using the keyboard.
+
+[TIP]
+====
+Find all available configurable *settings* with <<Keyboard Control>> in
+section <<Mdules>>.
+====
+
+Find below how to set Keyboard Control parameters, to enable or disable 
+the navigation through slides using keyboard.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+.Keyboard Control Example
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -983,7 +1083,7 @@ parameters or boolean `true` to enable with *default* settings.
 
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   keyboard: {
     enabled: true,
     onlyInViewport: false