RubyGems - j1-template - Versions diffs - 2024.3.17 → 2024.3.18 - Mend

j1-template 2024.3.17 → 2024.3.18

Files changed (610) hide show

data/lib/starter_web/pages/public/_includes/documents/swiper/600_swiper_events.asciidoc CHANGED Viewed

@@ -17,7 +17,7 @@ Fire event *on* swiper initialization.
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // ...
   on: {
     init: function () {
@@ -34,7 +34,7 @@ Fire event *after* swiper initialization.
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // ...
 });
@@ -61,14 +61,14 @@ Available *predefined* event listeners.
 Event fired on *active* index change.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     activeIndexChange: (swiper) => {
@@ -87,14 +87,14 @@ const swiper = new Swiper('.swiper', {
 Event fired right *after* swipers *initialization*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     afterInit: (swiper) => {
@@ -112,14 +112,14 @@ const swiper = new Swiper('.swiper', {
 Event fired right *before* swiper instance is destroyed.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeDestroy: (swiper) => {
@@ -137,14 +137,14 @@ const swiper = new Swiper('.swiper', {
 Event fired right *before* swiper initialization.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeInit: (swiper) => {
@@ -162,14 +162,14 @@ const swiper = new Swiper('.swiper', {
 Event fired right *after* swiper instance is destroyed.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     afterDestroy: (swiper) => {
@@ -187,14 +187,14 @@ const swiper = new Swiper('.swiper', {
 Event fired right *before* loop fix.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeLoopFix: (swiper) => {
@@ -212,14 +212,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *before* resize handler.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeResize: (swiper) => {
@@ -237,14 +237,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *before* slide *change transition* start.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeSlideChangeStart: (swiper) => {
@@ -262,14 +262,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *before* transition starts.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     beforeTransitionStart: (swiper, speed, internal) => {
@@ -287,14 +287,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on *breakpoint change*
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     breakpoint: (swiper, breakpointParams) => {
@@ -312,14 +312,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on *direction* change.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     changeDirection: (swiper) => {
@@ -343,14 +343,14 @@ Receives *pointerup* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     click: (swiper, event) => {
@@ -368,14 +368,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *after* swiper is destroyed.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     destroy: (swiper) => {
@@ -393,14 +393,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when user *double click/tap* on Swiper.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     doubleClick: (swiper, event) => {
@@ -423,14 +423,14 @@ Event fired when user *double tap* on the Swipers container.
 Receives *pointerup* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     doubleTap: (swiper, event) => {
@@ -448,14 +448,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when Swiper goes from *beginning* or *end* position.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     fromEdge: (swiper) => {
@@ -480,7 +480,7 @@ The `swiper.on('init')` syntax works only in case setting the parameter
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   init: false,
   // other parameters
 });
@@ -498,14 +498,14 @@ setup (new) as shown below.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     init: (swiper) => {
@@ -523,14 +523,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when swiper is *locked* (if `watchOverflow` is *enabled*).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     lock: (swiper) => {
@@ -548,14 +548,14 @@ const swiper = new Swiper('.swiper', {
 Event fired after *loop fix*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     loopFix: (swiper) => {
@@ -573,14 +573,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on momentum bounce.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     momentumBounce: (swiper) => {
@@ -598,14 +598,14 @@ const swiper = new Swiper('.swiper', {
 Event fired if observer is *enabled* and a *DOM mutations* is detected.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     observerUpdate: (swiper) => {
@@ -623,14 +623,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on *orientation change* (e.g. landscape -> portrait).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     orientationchange: (swiper) => {
@@ -654,14 +654,14 @@ Receives *progress event* as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     progress: (swiper, progress) => {
@@ -679,14 +679,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when Swiper reach its *beginning* (initial position).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     reachBeginning: (swiper) => {
@@ -704,14 +704,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when Swiper reach *last* slide.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     reachEnd: (swiper) => {
@@ -729,14 +729,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on real index change.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     realIndexChange: (swiper) => {
@@ -755,14 +755,14 @@ const swiper = new Swiper('.swiper', {
 Event fired on *window resize* and *before* on s swiper *onresize*
 manipulation.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     resize: (swiper) => {
@@ -793,14 +793,14 @@ Event fired *everytime* when swiper *starts animation*.
 Receives transition duration value (in ms) as an argument.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     setTransition: (swiper, transition) => {
@@ -823,14 +823,14 @@ Set *custom* CSS3 *transform translate* value for the *swiper wrapper*.
 Receives current *translate* value as as *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     setTranslate: (swiper, translate)) => {
@@ -848,14 +848,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when *active* slide has been *changed*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideChange: (swiper) => {
@@ -873,14 +873,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *after* animation to *other slide* (next or previous).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideChangeTransitionEnd: (swiper) => {
@@ -898,14 +898,14 @@ const swiper = new Swiper('.swiper', {
 Event fired in the *beginning* of animation to *other slide* (next or previous).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideChangeTransitionStart: (swiper) => {
@@ -923,14 +923,14 @@ const swiper = new Swiper('.swiper', {
 Same as *slideChangeTransitionEnd* but only for *forward direction*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideNextTransitionEnd: (swiper) => {
@@ -948,14 +948,14 @@ const swiper = new Swiper('.swiper', {
 Same as *slideChangeTransitionStart* but only for *forward direction*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideNextTransitionStart: (swiper) => {
@@ -973,14 +973,14 @@ const swiper = new Swiper('.swiper', {
 Same as *slideChangeTransitionEnd* but only for *backward direction*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slidePrevTransitionEnd: (swiper) => {
@@ -998,14 +998,14 @@ const swiper = new Swiper('.swiper', {
 Same as *slideChangeTransitionStart* but only for *backward direction*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slidePrevTransitionStart: (swiper) => {
@@ -1023,14 +1023,14 @@ const swiper = new Swiper('.swiper', {
 Event fired in the *end* of animation of *resetting* slide to current one.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideResetTransitionEnd: (swiper) => {
@@ -1049,14 +1049,14 @@ const swiper = new Swiper('.swiper', {
 Event fired in the *beginning* of animation of *resetting* slide to
 current one.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slideResetTransitionStart: (swiper) => {
@@ -1079,14 +1079,14 @@ Event fired when user *touch and move* finger over Swiper and move it.
 Receives *pointermove* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     xxx: (swiper, event) => {
@@ -1109,14 +1109,14 @@ Event fired when user *touch and move* finger over Swiper and move it.
 Receives *pointermove* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     sliderMove: (swiper, event) => {
@@ -1134,14 +1134,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when *slides grid* has been *changed*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slidesGridLengthChange: (swiper) => {
@@ -1160,14 +1160,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when *number* of slides has been *changed*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slidesLengthChange: (swiper) => {
@@ -1185,14 +1185,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *after* slides and their sizes are *calculated and updated*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     slidesUpdated: (swiper) => {
@@ -1210,14 +1210,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when *snap grid* has been *changed*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     snapGridLengthChange: (swiper) => {
@@ -1235,14 +1235,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when *snap index* has been changed.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     xxx: (swiper) => {
@@ -1265,14 +1265,14 @@ Event fired when user *click/tap* on *Swiper*.
 Receives *pointerup* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     tap: (swiper, event) => {
@@ -1290,14 +1290,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when Swiper goes to *beginning* or *end* position.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     toEdge: (swiper) => {
@@ -1320,14 +1320,14 @@ Event fired *after* user *releases* the swiper.
 Receives *pointerup* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     touchEnd: (swiper, event) => {
@@ -1350,14 +1350,14 @@ Event fired when user *touch and move* finger *over* the swiper.
 Receives *pointermove* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     touchMove: (swiper, event) => {
@@ -1381,14 +1381,14 @@ to the *direction parameter*.
 Receives *pointermove* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     touchMoveOpposite: (swiper, event) => {
@@ -1411,14 +1411,14 @@ Event fired when user *touches* the swiper.
 Receives *pointerdown* event as an *argument*.
 ====
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     touchStart: (swiper, event) => {
@@ -1436,14 +1436,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *after* a transition.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     xxx: (swiper) => {
@@ -1461,14 +1461,14 @@ const swiper = new Swiper('.swiper', {
 Event fired in the *beginning* of a transition.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     transitionStart: (swiper) => {
@@ -1486,14 +1486,14 @@ const swiper = new Swiper('.swiper', {
 Event fired when swiper is *unlocked* (if parameter `watchOverflow` is *enabled*).
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     unlock: (swiper) => {
@@ -1511,14 +1511,14 @@ const swiper = new Swiper('.swiper', {
 Event fired *after* update() call is *finished*.
-[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="12a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Usage
 |
 [source, js]
 ----
-const swiper = new Swiper('.swiper', {
+const swiper = new Swiper('#swiper_id', {
   // option settings ...
   on: {
     update: (swiper) => {