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

j1-template 2024.3.17 → 2024.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1597) 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) => {