j1-template 2024.3.17 → 2024.3.19

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

@@ -1,973 +0,0 @@
----
-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>
-++++
-