j1-template 2024.3.15 → 2024.3.17

data/lib/starter_web/pages/public/swiper_tester.adoc

@@ -0,0 +1,973 @@
+---
+title:                                  Swiper Tester
+title_extention:                        Swiper Integration
+tagline:                                Swiper Integration
+
+date:                                   2025-01-07
+#last_modified:                         2025-01-01
+
+description: >
+
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, video, support, flash player,
+                                        quicktime, silverlight
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Module, Swiper ]
+
+image:
+  path:                                 /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/swiper_tester/
+
+resources:                              [ swiper, slick-slider, photoswipe, videojs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+          alt:                          Swiper Tester
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Attribute settings for section control
+//
+:swiper--features:                      false
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Swiper, the free and most modern mobile touch slider with hardware accelerated
+transitions and amazing native behavior. It is intended to be used in mobile
+websites, mobile web apps, and mobile native/hybrid apps.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+lorem:sentences[5]
+
+[NOTE]
+====
+Swiper is not compatible with all platforms, it is a modern touch slider
+which is focused only on modern apps/platforms to bring the best experience
+and simplicity.
+====
+
+[role="mt-5"]
+== Examples
+// See: https://swiperjs.com/demos
+
+lorem:sentences[5]
+
+[role="mt-4"]
+=== Text Slider
+
+A slider is typically used for displaying images. Still, the implementation
+for the J1 Template supports a lot more sources to be displayed as a slide
+show — simple text for example.
+
+==== Base Text Carousel
+
+Important statements or topics can be placed on top of an article or a
+paragraph to give them better visibility. You can present facts to know
+animated for the readers attention.
+
+++++
+<div id="textSwiper" class="swiper swiper--text">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">
+      <p>
+        <big>J1 is Open Source</big>
+        <br> 
+        <i>No pain for private or professional use</i>
+      </p>
+    </div>
+    <div class="swiper-slide">
+      <p>
+        <big>Explore this site</big>
+        <br> 
+        <i>Learn what's possible if you go the Jekyll Way</i>
+      </p>
+    </div>
+    <div class="swiper-slide">
+      <p>
+        <big>Create modern static sites</big>
+        <br> 
+        <i>Secure, powerful and fast!</i>
+      </p>
+    </div>
+  </div>
+
+  <div class="autoplay-progress">
+    <svg viewBox="0 0 48 48">
+      <circle cx="24" cy="24" r="20"></circle>
+    </svg>
+    <span></span>
+  </div>  
+</div>
+
+<!-- Initialize Text Swiper -->
+<script>
+$(function() {
+  // ---------------------------------------------------------------------------
+  // slider initializer
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+    if (atticFinished) {
+      const progressCircle  = document.querySelector(".autoplay-progress svg");
+      const progressContent = document.querySelector(".autoplay-progress span");
+
+      const textSwiper = new Swiper('#textSwiper', {
+          // Optional parameters
+          direction: 'horizontal',
+          loop: true,
+          autoplay: {
+            delay: 3000,
+            pauseOnMouseEnter: true,
+            disableOnInteraction: false
+          },
+          // scrollbar: {
+          //     el: '.swiper-scrollbar',
+          // },
+          // on: {
+          //   // afterInit: function (swiper) {
+          //   //   // do something
+          //   // },        
+          //   // autoplayTimeLeft(s, time, progress) {
+          //   //   progressCircle.style.setProperty("--progress", 1 - progress);
+          //   //   progressContent.textContent = `${Math.ceil(time / 1000)}s`;
+          //   // }
+          // }
+      }); 
+ 
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+  }, 10); // END dependencies_met_page_ready
+});    
+</script>
+++++
+
+[role="mt-4"]
+=== Image Slider
+
+Sliders (or Carousel)s are mostly used for pictures data to animate the
+images as a series. Find with the following some examples of how to use
+a slider for your image data.
+
+[role="mt-4"]
+==== Base Silder + Captions
+
+A simple image show is useful, for example, as an animated (or not animated)
+banner presenting exciting things about your site or the products offered.
+
+++++
+  <!-- Swiper HTML Base Slider (image)-->
+  <div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Base Silder · Captions</div>
+
+  <div id="base_image_slider_1" class="swiper swiper-container">
+    <!-- jadams, 2025-01-15, customize wrapper element for HEIGHT|OUTER bullets -->
+    <!-- Slides container -->
+    <ul class="swiper-wrapper" style="margin-bottom: 3.75rem;">
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg">
+        <div class="caption"> Image 1</div>
+      </li>
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+        <div class="caption">Image 2</div>
+      </li>
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+        <div class="caption">Image 3</div>
+      </li>
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+        <div class="caption">Image 4</div>
+      </li>
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+        <div class="caption">Image 5</div>
+      </li>
+      <li class="swiper-slide">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+        <div class="caption">Image 6</div>
+      </li>
+    </ul> <!-- END swiper-wrapper (slides) -->
+
+    <!-- Navigation -->
+    <!-- div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div -->
+
+    <!-- Pagination -->
+    <!-- jadams, 2025-01-15, customize pagination element for OUTER bullets -->
+    <div class="swiper-pagination" style="bottom: 16px;"></div>
+
+  </div> <!-- END swiper-container -->
+
+  <script>
+  $(function() {
+    // -------------------------------------------------------------------------
+    // slider initializer
+    // -------------------------------------------------------------------------
+    var dependencies_met_page_ready = setInterval (() => {
+      var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+      if (atticFinished) {
+
+        const baseImageSlider1 = new Swiper("#base_image_slider_1", {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+          spaceBetween: 5,
+          // navigation: {
+          //   nextEl: ".swiper-button-next",
+          //   prevEl: ".swiper-button-prev",
+          // },
+          pagination: {
+            el: ".swiper-pagination",
+            type: 'bullets',
+            clickable: true,
+            renderBullet: function (index, className) {
+              return '<span class="' + className + '">' + (index + 1) + "</span>";
+            }
+          }        
+        });
+
+        clearInterval(dependencies_met_page_ready);
+      } // END pageVisible
+
+    }, 10); // END dependencies_met_page_ready
+  });
+  </script>
+++++
+
+
+[role="mt-4"]
+==== Base Slider + Captions + Lightbox
+
+Carousels are used for an exceptionally compact form of image galleries.
+This example shows some pictures having individual caption text and supports
+a lightbox to enlarge images full size.
+
+++++
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Base Silder · Captions + Lightbox</div>
+<div id="my_gallery" class="swiper swiper-container">
+  <!-- Slides container -->
+  <ul class="swiper-wrapper" style="margin-bottom: 3.75rem;">
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg"
+         data-pswp-width="1600"
+         data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg" alt="Image 1">
+        <div class="caption">Image 1</div>
+        <span class="pswp-caption-content">Image 1</span>
+      </a>
+    </li>
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg"
+        data-pswp-width="1600"
+        data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg" alt="Image 2">
+        <div class="caption">Image 2</div>
+        <span class="pswp-caption-content">Image 2</span>
+      </a>
+    </li>
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg"
+        data-pswp-width="1600"
+        data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg" alt="Image 3">
+        <div class="caption">Image 3</div>
+        <span class="pswp-caption-content">Image 3</span>
+      </a>
+    </li>
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg"
+        data-pswp-width="1600"
+        data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg" alt="Image 4">
+        <div class="caption">Image 4</div>
+        <span class="pswp-caption-content">Image 4</span>
+      </a>
+    </li>
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg"
+        data-pswp-width="1600"
+        data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg" alt="Image 5">
+        <div class="caption">Image 5</div>
+        <span class="pswp-caption-content">Image 5</span>
+      </a>
+    </li>
+    <li class="swiper-slide">
+      <a href="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg"
+        data-pswp-width="1600"
+        data-pswp-height="900">
+        <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg" alt="Image 6">
+        <div class="caption">Image 6</div>
+        <span class="pswp-caption-content">Image 6</span>
+      </a>
+    </li>
+  </ul>
+
+  <!-- Pagination -->
+  <div class="swiper-pagination"></div>
+
+  <!-- Navigation -->
+  <!-- div class="swiper-button-prev"></div>
+  <div class="swiper-button-next"></div -->
+</div>
+
+<script>
+$(function() {
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+      if (atticFinished) {
+
+        // ---------------------------------------------------------------------
+        // slider initializer
+        // ---------------------------------------------------------------------
+        var swiper = new Swiper("#my_gallery", {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+          spaceBetween: 5,
+          grabCursor: true,
+          loop: true,
+          pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+            renderBullet: function(index, className) {
+              return '<span class="' + className + '">' + (index + 1) + "</span>";
+            }
+          },
+          // navigation: {
+          //   nextEl: '.swiper-button-next',
+          //   prevEl: '.swiper-button-prev',
+          // },
+          // autoplay: { 
+          //   delay: 4000,
+          //   disableOnInteraction: true
+          // },
+          keyboard: {
+            enabled: true,
+          },
+        });
+
+        // ---------------------------------------------------------------------
+        // PhotoSwipe initializer
+        // ---------------------------------------------------------------------
+
+        // Setup PhotoSwipe Lightbox
+        // ---------------------------------------------------------------------
+        const myLightbox = new PhotoSwipeLightbox({
+          gallery: '#my_gallery',
+          pswpModule: PhotoSwipe,
+          bgOpacity: 1,
+          showHideOpacity: true,
+          children: 'a',
+          loop: true,
+          showHideAnimationType: 'zoom',
+          imageClickAction: 'next',
+          tapAction: 'next',
+          zoom: false,
+          close: true,
+          counter: true,
+          arrowKeys: true,
+          bgOpacity: "1",
+          wheelToZoom: true,
+          escKey: true
+        });
+
+        // Setup Lightbox Captions
+        // ---------------------------------------------------------------------
+        const captionPlugin = new PhotoSwipeDynamicCaption(myLightbox, {
+          type: 'auto'
+        });
+
+        // Initialize the Lightbox
+        // ---------------------------------------------------------------------
+        myLightbox.init();
+
+        // Create Lightbox Events
+        // ---------------------------------------------------------------------
+        myLightbox.on('change', () => {
+          const { pswp } = myLightbox;
+          swiper.slideTo(pswp.currIndex, 0, false);
+          console.log('Slide index', pswp.currIndex);
+          console.log('Slide object', pswp.currSlide);
+          console.log('Slide object data', pswp.currSlide.data);
+        });
+
+        myLightbox.on('afterInit', () => {
+          const { pswp } = myLightbox;
+          if (swiper.params.autoplay.enabled) {
+            swiper.autoplay.stop();
+          };
+        });
+
+        // if autoplay enabled, run autoplay.start() on (lightbox) close
+        myLightbox.on('closingAnimationStart', () => {
+          const { pswp } = myLightbox;
+          swiper.slideTo(pswp.currIndex, 0, false);
+          if (swiper.params.autoplay.enabled) {
+            swiper.autoplay.start();
+          }
+        });
+
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+  }, 10); // END dependencies_met_page_ready
+});
+</script>
+++++
+
+[role="mt-4"]
+[[image_thumbs_silder_bottom]]
+==== Thumbs Slider (bottom)
+
+To give the users a more *visual* control over a slideshow, Swiper sliders can
+provide UI elements by placing mini-images or short text elements (thumbs)
+side-by-side (on the left|right), or at bottom|toop of a slideshow. Find below
+examples how to control such sliders by a thumbs slave silder.
+
+++++
+<!-- Master Slider  (top) -->
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Thumbs Silder · Bottom</div>
+<div id="master_slider_1" class="swiper swiper-container">
+
+  <!-- Slides container -->
+  <ul class="swiper-wrapper">
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg">      
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+    </li>
+  </ul> <!-- END swiper-wrapper -->
+
+</div> <!-- END swiper-container -->
+
+<!-- Thumbs Slider (bottom) -->
+<div id="thumbs_slider_1" class="swiper swiper-container thumbs-slider--bottom mt-1 mb-5">
+
+  <!-- Slides container -->
+  <ul class="swiper-wrapper">
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+    </li>
+    <li class="swiper-slide">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+    </li>
+  </ul> <!-- END swiper-wrapper -->
+
+</div> <!-- END swiper-container -->
+
+<!-- Initialize Image Thumbs Slider (bottom) -->
+<script>
+$(function() {
+  // ---------------------------------------------------------------------------
+  // slider initializer
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+    if (atticFinished) {
+
+      const thumbsSlider1 = new Swiper("#thumbs_slider_1", {
+        autoHeight: true,
+        direction: 'horizontal',
+        spaceBetween: 5,
+        slidesPerView: 3,
+        grabCursor: true,
+        freeMode: false,
+        watchSlidesProgress: true,
+        on: {
+          transitionStart: (swiper) => {
+            masterSlider1.slideTo(swiper.activeIndex);
+          }
+        },
+      });
+
+      const masterSlider1 = new Swiper("#master_slider_1", {
+        direction: 'horizontal',
+        thumbs: {
+          swiper: thumbsSlider1,
+        },
+        on: {
+          slideChangeTransitionStart: (swiper) => {
+            thumbsSlider1.slideTo(swiper.activeIndex);
+          }
+        },
+      });
+
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+  }, 10); // END dependencies_met_page_ready
+});    
+</script>
+++++
+
+[role="mt-4"]
+[[image_thumbs_silder_right]]
+==== Thumbs Slider (right) + Captions
+
+A more *compact* version using image thumbs can defined by placing the thumb
+images (slave slider) on the right of the  master slider side-by-side. The will
+reduce the size of the (master) slider, but all elements of the combined sliders
+are in a *single row*.
+
+++++
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Thumbs Silder · Right + Captions</div>
+<div class="container g-0 mb-5">
+    <div class="row gx-1">
+
+      <!-- BS Multi Slider (left) -->
+      <div class="col-md-9">
+        <div id="master_slider_2" class="swiper swiper-container swiper--multi gallery-slider">
+            <!-- Slides container -->
+            <ul class="swiper-wrapper">
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg">
+                <div class="caption">Image 1</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+                <div class="caption">Image 2</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+                <div class="caption">Image 3</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+                <div class="caption">Image 4</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+                <div class="caption">Image 5</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+                <div class="caption">Image 6</div>
+              </li>
+            </ul> <!-- END swiper-wrapper -->
+        </div> <!-- END swiper-container -->
+      </div> <!-- END col-md-9"  -->
+
+      <!-- Thumbs Slider (right) -->
+      <div class="col-md-3">
+        <div id="thumbs_slider_2" class="swiper swiper-container swiper--multi thumbs-slider--right">
+          <!-- Slides container -->
+          <ul class="swiper-wrapper">
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg">
+              <div class="caption">Image 1</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+              <div class="caption">Image 2</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+              <div class="caption">Image 3</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+              <div class="caption">Image 4</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+              <div class="caption">Image 5</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+              <div class="caption">Image 6</div>
+            </li>
+          </ul> <!-- END swiper-wrapper -->
+        </div> <!-- END swiper-container -->
+      </div> <!-- END col-md-3"  -->
+
+    </div> <!-- END BS row -->
+</div> <!-- END BS container -->
+
+<!-- Initialize BS Multi Swiper -->
+<script>
+$(function() {
+  // ---------------------------------------------------------------------------
+  // slider initializer
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+    if (atticFinished) {
+
+      // Initialize Thumb Swiper instance (right)
+      var thumbsSwiper2 = new Swiper('#thumbs_slider_2', {
+        direction: 'vertical',
+        spaceBetween: 5,
+        slidesPerView: 3,
+        grabCursor: true,
+        // centeredSlides: true,
+        // centeredSlidesBounds: true,
+        // watchOverflow: true,
+        // watchSlidesVisibility: true,
+        // watchSlidesProgress: true,
+        on: {
+          transitionStart: (swiper) => {
+            masterSwiper2.slideTo(swiper.activeIndex);
+          }
+        }
+      });
+
+      // Initialize Master Swiper instance (left)
+      var masterSwiper2 = new Swiper('#master_slider_2', {        
+        direction: 'horizontal',
+        grabCursor: true,
+        // watchOverflow: true,
+        // watchSlidesVisibility: true,
+        // watchSlidesProgress: true,
+        // preventInteractionOnTransition: true,
+        effect: 'fade',
+          fadeEffect: {
+          crossFade: true
+        },
+        thumbs: {
+          swiper: thumbsSwiper2
+        },
+        on: {
+          slideChangeTransitionStart: (swiper) => {
+            thumbsSwiper2.slideTo(swiper.activeIndex);
+          },
+          click: (swiper, event) => {
+            console.log('Clicked on the slider, index: ', swiper.activeIndex);
+          }
+        }
+      });
+
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+  }, 10); // END dependencies_met_page_ready
+});    
+</script>
+++++
+
+
+[role="mt-4"]
+[[slider-videojs]]
+=== Video Slider
+
+If only a *small* number of video sources should presented, the concept of
+controller based slders using Thumb Elements provide a quite *space-saving*
+way to do so.
+
+The J1 template system uses VideoJS to enable *mixed* video sliders. VideoJS
+for J1 supports VJS plugins for local Video like MP4 files or platforms like
+YouTube, Vimeo, or Dailymotion to play video *sources* from *different*
+providers.
+
+++++
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Video Slider · Mixed Sources + Captions</div>
+<!-- Master Slider (top) -->
+<div id="master_slider_3" class="swiper swiper-container master-slider">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide swiper-no-swiping" data-slide-type="image">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg" aria-label="Animals-1">
+      <div class="caption">Image 1</div>
+    </div>    
+
+    <!-- div class="swiper-slide swiper-no-swiping" data-slide-type="video">
+      <video
+        id="peck_pocketed_video"
+        class="video-js vjs-theme-uno"
+        controls
+        width="640" height="360"
+        poster="/assets/video/poster/html5/peck_pocketed.jpg"
+        alt="title"
+        aria-label="title"
+        data-setup='{
+          "fluid" : true,
+          "sources": [{
+            "type": "video/mp4",
+            "src": "/assets/video//html5/peck_pocketed.mp4"
+          }],
+          "controlBar": {
+            "pictureInPictureToggle": false,
+            "skipButtons": {
+              "backward": 15,
+              "forward": 15
+            },
+            "volumePanel": {
+              "inline": false
+            }
+          }
+        }'
+      > </video>
+    </div -->
+
+    <div class="swiper-slide swiper-no-swiping" data-slide-type="video">
+      <video
+        id="peck_pocketed_video"
+        class="video-js vjs-theme-uno"
+        controls
+        width="640" height="360"
+        poster="//img.youtube.com/vi/1J2qz6B-PFY/maxresdefault.jpg"
+        data-setup='{
+          "fluid" : true,
+          "rel": 0,
+          "techOrder": [
+            "youtube", "html5"
+          ],
+          "sources": [{
+            "type": "video/youtube",
+            "src": "//youtube.com/watch?v=1J2qz6B-PFY"
+          }],
+          "controlBar": {
+            "pictureInPictureToggle": false,
+            "volumePanel": {
+              "inline": false
+            }
+          }
+        }'
+      >
+      </video>
+      <div class="caption">Roni Sagi & Rhythm · AGT 2024 (YouTube)</div>
+    </div>
+
+    <div class="swiper-slide swiper-no-swiping" data-slide-type="image">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg" aria-label="Animals-2">
+      <div class="caption">Image 2</div>
+    </div>
+    <div class="swiper-slide swiper-no-swiping" data-slide-type="image">
+      <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg" aria-label="Animals-3">
+      <div class="caption">Image 3</div>
+    </div>
+  </div> <!-- END swiper-wrapper -->
+
+</div> <!-- END swiper-container -->
+
+<!-- Thumbs Slider (bottom) -->
+<div id="thumbs_slider_3" class="swiper swiper-container thumbs-slider thumbs-slider--bottom mt-1 mb-8">
+
+  <div class="swiper-wrapper">
+		<div class="swiper-slide">
+		  <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-1.jpg" aria-label="Animals-1">
+      <div class="caption">Image 1</div>
+		</div>
+		<div class="swiper-slide">
+		  <!-- img src="/assets/video/poster/html5/peck_pocketed.jpg" aria-label="peck_pocketed" -->
+		  <img src="//img.youtube.com/vi/1J2qz6B-PFY/maxresdefault.jpg">
+      <div class="caption">Roni Sagi & Rhythm · AGT 2024 (YouTube)</div>
+		</div>
+		<div class="swiper-slide">
+		  <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg" aria-label="Animals-2">
+      <div class="caption">Image 2</div>
+		</div>      
+		<div class="swiper-slide">
+		  <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg" aria-label="Animals-3">
+		</div>
+	</div> <!-- END swiper-wrapper -->
+
+</div> <!-- END swiper-container -->
+
+<script>
+$(function() {
+
+  // ---------------------------------------------------------------------------
+  // slider initializer
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+    if (atticFinished) {
+
+      const VIDEO_PLAYING_STATE = {
+        "PLAYING":  "PLAYING",
+        "PAUSE":    "PAUSE",
+        "ENDED":    "ENDED"
+      }; 
+
+      var vjsPlayer;
+      var vjsOptions;
+      var piSkipButtons;
+
+      var vjsPlayerType   = 'native';
+      var videoPlayStatus = VIDEO_PLAYING_STATE.PAUSE;
+
+      piSkipButtons = {
+        enabled:            true,
+        backward:           30,
+        forward:            30,
+        backwardIndex:      0,
+        forwardIndex:       0,
+        surroundPlayButton: true
+      };
+
+      // Thumbs Slider (slave|bottom)
+      // -----------------------------------------------------------------------
+      const thumbsSlider3 = new Swiper("#thumbs_slider_3", {
+        direction: 'horizontal',
+        spaceBetween: 5,
+        slidesPerView: 3,
+        grabCursor: true,
+        watchSlidesProgress: true,
+        on: {
+          transitionStart: (swiper) => {
+            masterSlider3.slideTo(swiper.activeIndex);
+          }
+        }
+      });
+
+      // Initialize Master Slider
+      // -----------------------------------------------------------------------
+      // See: https://stackoverflow.com/questions/45468980/how-to-fix-event-conflicts-between-swiper-and-video-js
+      var masterSlider3 = new Swiper('#master_slider_3', {
+        autoHeight:       true,  // adapt height of the currently active slide.
+        direction:        'horizontal',
+        thumbs: {
+          swiper: thumbsSlider3,
+        },
+        on: {
+          afterInit: (swiper) => {
+            // do something
+          },
+          slideChangeTransitionStart: (swiper) => {
+            thumbsSlider3.slideTo(swiper.activeIndex);
+          },          
+          slideChangeTransitionEnd: (swiper) => {
+            var currentSlide      = $(swiper.slides[swiper.activeIndex]);
+            var currentSlideType  = currentSlide.data('slide-type');
+            // in case user click next before video ended
+            if (videoPlayStatus === VIDEO_PLAYING_STATE.PLAYING) {
+              vjsPlayer.pause();
+            }
+
+            switch (currentSlideType) {
+              case 'image':
+                //runNext();
+                break;
+              case 'video':
+                // vjsPlayer.currentTime(0);
+                // vjsPlayer.play();
+                videoPlayStatus = VIDEO_PLAYING_STATE.PLAYING;
+                break;
+              default:
+                throw new Error('invalid slide type');
+            }
+          }
+        }
+      });
+
+      // vjsPlayer.on('ended', function() {
+      //     next();
+      // });
+
+      // global function
+      // function prev() {
+      //   swiper.slidePrev();
+      // }
+
+      // function next() {
+      //   swiper.slideNext();
+      // }
+
+      // function runNext() {  
+      //   timeout = setTimeout(function () {
+      //     next()
+      //   }, waiting)
+      // }
+
+      // Initialize VideoJS player/s
+      // -----------------------------------------------------------------------
+      vjsOptions = {
+        plugins: {
+          skipButtons: {
+            backward:       30,
+            forward:        30,
+            backwardIndex:  0,
+            forwardIndex:   1
+          }
+        }
+      };
+      vjsPlayer = videojs('peck_pocketed_video', {});
+
+      // Add VJS plugins
+      // -----------------------------------------------------------------------
+      if (piSkipButtons.enabled) {
+        var backwardIndex = piSkipButtons.backwardIndex;
+        var forwardIndex  = piSkipButtons.forwardIndex;
+
+        // property 'surroundPlayButton' takes precendence
+        //
+        if (piSkipButtons.surroundPlayButton) {
+          var backwardIndex = 0;
+          var forwardIndex  = 1;
+        }
+
+        // plugin initialized with custom options
+        // See: https://videojs.com/guides/options/
+        vjsPlayer.skipButtons({
+          backwardIndex:  backwardIndex,
+          forwardIndex:   forwardIndex,
+          backward:       piSkipButtons.backward,
+          forward:        piSkipButtons.forward,
+        });
+      }
+
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+  }, 10); // END dependencies_met_page_ready
+
+});
+</script>
+++++
+