j1-template 2024.3.16 → 2024.3.18

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

@@ -0,0 +1,796 @@
+---
+title:                                  SwiperJS
+title_extention:                        Selected Examples
+tagline:                                Selected Examples
+
+date:                                   2025-02-10
+#last_modified:                         2025-01-01
+
+description: >
+                                        SwiperJS is an API that creates modern slider shows.
+                                        All sliders use hardware-accelerated features like
+                                        3D transitions to perform best on modern devices.
+                                        SwiperJS-based sliders are intended to be displayed
+                                        at their best on all types of websites, es such
+                                        as tablets or smartphones.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, video, support, flash player,
+                                        quicktime, silverlight
+
+categories:                             [ Tester ]
+tags:                                   [ Swiper ]
+
+image:
+  path:                                 /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+compress:                               false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tools/tester/swiper/
+
+resources:                              [ photoswipe, swiper, 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"]
+SwiperJS is an API that creates modern slider shows. All sliders use
+hardware-accelerated features like 3D transitions to perform best on modern
+devices. SwiperJS-based sliders are intended to be displayed at their best
+on all types of websites, such as tablets or smartphones.
+
+// 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-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.
+
+// [role="mt-4"]
+// === 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.
+
+// .Text Swiper
+// swiper::swiper_text_base[role="mt-4 mb-4"]
+
+
+[role="mt-4"]
+== Image Sliders
+
+Sliders (or carousels) are mainly used for picture data to animate images
+as a group. Find below examples of using a simple (base) slider for your
+image data.
+
+[role="mt-4"]
+=== Same Image Sizes
+
+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.
+
+.Same image sizes
+swiper::swiper_image_base_lightbox[role="mt-4 mb-4"]
+
+[role="mt-5"]
+=== Mixed Image Sizes
+
+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.
+
+.Mixed image sizes
+swiper::swiper_image_base_captions[role="mt-4 mb-4"]
+
+
+[role="mt-5"]
+== Sliders using Views
+
+Views in the J1 Template for SwioperJS are *transformations* of a Swiper to
+rebuild it for extended *UI controls* or create a more complex visual
+*presentation* for the Swiper's slides.
+
+Views can *improve* the *useability* of a slider or make the presentation
+of a slideshow more *interesting*.
+
+[role="mt-4"]
+[[image_thumb_silder]]
+=== Thumbs View
+
+To give the users a more *visual* control over a slideshow, Swiper sliders
+can provide *UI elements* by placing minified images or text elements (thumbs)
+side-by-side (on the left|right), or at the bottom|top of a swiper. Find below
+examples how to control such sliders' by a thumb (slave) silder.
+
+[role="mt-4"]
+[[image_thumbs_top_bottom]]
+==== Thumb Slider (top|bottom)
+
+This Thumb Slider uses minified images that are placed to control the (main)
+slider at the *top* or the *bottom*. This swiper type creates a thumbed Swiper
+that uses *two lanes*, which takes up a *lot of space* but can render the
+sliders' images *optimally*.
+
+[role="mb-5"]
+[TIP]
+====
+This Thumb Slider creates the best results for high-quality images for websites
+mainly used on *desktops*.
+====
+
+.Extended Slider · Thums View + Captions
+swiper::thumb_slider_animals[role="mt-0 mb-5"]
+
+
+[role="mt-5"]
+[[image_thumbs_right_left]]
+==== Thumbs Slider (right|left) + Captions + Lightbox
+
+A more *mobile-friendly* version of a Thunbs Slider is created by placing the
+minified images on the slider's *right* or *left* side. This swiper uses a
+*single lane*, but *minifies* the presented images.
+
+[role="mb-5"]
+[TIP]
+====
+Adding a *Lightbox* to a single-lane swiper allows users to *enlarge* the
+presented *images*.
+====
+
+++++
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Thumbs View · Position Right + Captions + Lightbox </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="swp-caption-content">Husky</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+                <div class="swp-caption-content">Female Lion</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+                <div class="swp-caption-content">Approaching Vulture</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+                <div class="swp-caption-content">Group of Flamingos</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+                <div class="swp-caption-content">Young Deer</div>
+              </li>
+              <li class="swiper-slide">
+                <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+                <div class="swp-caption-content">Little Bird</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="swp-caption-content">Husky</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-2.jpg">
+              <div class="swp-caption-content">Female Lion</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-3.jpg">
+              <div class="swp-caption-content">Approaching Vulture</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-4.jpg">
+              <div class="swp-caption-content">Group of Flamingos</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-5.jpg">
+              <div class="swp-caption-content">Young Deer</div>
+            </li>
+            <li class="swiper-slide">
+              <img src="/assets/image/modules/masterslider/slider_4/ms-free-animals-6.jpg">
+              <div class="swp-caption-content">Little Bird</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-5"]
+=== Neighbor View
+
+A slideshow typically presents a larger number of slides, which requires a
+sort of navigation. The Effect *neighbor* accompanies the *active* slide by
+their *neighbors* on the left and right as *previews*. The neighbor on the
+left acts like a *previous button* and scrolls the slides *backward*. The
+neighbor on the *right* acts like a *next button* and scrolls the slides
+*forward*.
+
+[role="mb-5"]
+[TIP]
+====
+The Effect transforms a slider into a quite *compact* presentation that does
+*not* require any (additional) *navigation* elements.
+====
+
+++++
+<div class="carousel-title mt-4"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Extended Slider · Neighbor View </div>
+
+<!-- Neighbor slider -->
+<div id="neighbor_slider" class="neighbor-slider mb-5">
+
+  <!-- Main center swiper -->
+  <!-- Duplicate swipers will be created automatically -->
+  <div class="swiper swiper-container">
+
+    <ul class="swiper-wrapper">
+      <li class="swiper-slide">
+        <img class="bg-image" src="/assets/image/modules/gallery/neighbor_slider/guardians-of-the-galaxy.jpg"
+        alt="Guardians of the Galaxy">
+      </li>
+      <li class="swiper-slide">
+        <img class="bg-image" src="/assets/image/modules/gallery/neighbor_slider/justice-league.jpg"
+        alt="Justice League">
+      </li>
+      <li class="swiper-slide">
+        <img class="bg-image" src="/assets/image/modules/gallery/neighbor_slider/spider-man.jpg"
+        alt="Spider Man">
+      </li>
+      <li class="swiper-slide">
+        <img class="bg-image" src="/assets/image/modules/gallery/neighbor_slider/suicide-squad.jpg"
+        alt="Suicide Squad">
+      </li>
+      <li class="swiper-slide">
+        <img class="bg-image" src="/assets/image/modules/gallery/neighbor_slider/thor-ragnarok.jpg"
+        alt="Thor Ragnarok">
+      </li>
+    </ul>
+
+  </div>
+</div>
+
+<script>
+
+$(function() {
+
+  // Initialize Swiper Effect Neighbor
+  function createTripleSlider(swiper) {
+    var tripleMainSwiper;
+
+    // main slider
+    //
+    const swiperEl = swiper.querySelector('.swiper');
+
+    // create (duplicate) prev slider
+    //
+    const swiperPrevEl = swiperEl.cloneNode(true);
+    swiperPrevEl.classList.add('neighbor-slider-prev');
+    swiper.insertBefore(swiperPrevEl, swiperEl);
+    const swiperPrevSlides = swiperPrevEl.querySelectorAll('.swiper-slide');
+    const swiperPrevLastSlideEl = swiperPrevSlides[swiperPrevSlides.length - 1];
+    swiperPrevEl
+      .querySelector('.swiper-wrapper')
+      .insertBefore(swiperPrevLastSlideEl, swiperPrevSlides[0]);
+
+    // create (duplicate) next slider
+    //
+    const swiperNextEl = swiperEl.cloneNode(true);
+    swiperNextEl.classList.add('neighbor-slider-next');
+    swiper.appendChild(swiperNextEl);
+    const swiperNextSlides = swiperNextEl.querySelectorAll('.swiper-slide');
+    const swiperNextFirstSlideEl = swiperNextSlides[0];
+    swiperNextEl
+      .querySelector('.swiper-wrapper')
+      .appendChild(swiperNextFirstSlideEl);
+
+    // Add main class
+    //
+    swiperEl.classList.add('neighbor-slider-main');
+
+    // common params for all sliders
+    //
+    const commonParams = {
+      speed: 600,
+      loop: true,
+      parallax: true,
+    };
+
+    // init prev slider
+    //
+    const triplePrevSwiper = new Swiper(swiperPrevEl, {
+      ...commonParams,
+      allowTouchMove: false,
+      on: {
+        click() {
+          tripleMainSwiper.slidePrev();
+        },
+      },
+    });
+
+    // init next slider
+    //
+    const tripleNextSwiper = new Swiper(swiperNextEl, {
+      ...commonParams,
+      allowTouchMove: false,
+      on: {
+        click() {
+          tripleMainSwiper.slideNext();
+        },
+      },
+    });
+
+    // init main slider
+    //
+    tripleMainSwiper = new Swiper(swiperEl, {
+      ...commonParams,
+      grabCursor: true,
+      controller: {
+        control: [triplePrevSwiper, tripleNextSwiper],
+      },
+      on: {
+        destroy() {
+          // destroy side sliders on main (slider) destroy
+          triplePrevSwiper.destroy();
+          tripleNextSwiper.destroy();
+        },
+      },
+    });
+
+    return tripleMainSwiper;
+  }
+
+  // ---------------------------------------------------------------------------
+  // slider initializer
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval (() => {
+    var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+    if (atticFinished) {
+
+//    const sliderEl = document.querySelector('.neighbor-slider');
+      const slider = document.querySelector('#neighbor_slider');
+      createTripleSlider(slider);
+
+      clearInterval(dependencies_met_page_ready);
+    } // END pageVisible
+    
+  }, 10); // END dependencies_met_page_ready
+});
+
+</script>
+++++
+
+[role="mt-5"]
+=== Pamorama View
+
+The panorama view presents the available slides of a slider as a group. The
+group is displayed in a virtual, circular viewing angle.
+
+[role="mb-5"]
+[TIP]
+====
+The effect is great for slides connected in terms of content to give the user
+a panoramic view impression.
+====
+
+.Extended Slider · Panorama View
+swiper::swiper_image_panorama[role="mt-4 mb-8"]
+
+
+// .Extended Slider Heroes · Panorama effect
+// swiper::swiper_image_neighbor[role="mt-4 mb-4"]
+/////
+[role="mt-5"]
+== Sliders using Layouts
+
+lorem:sentences[5]
+
+[role="mt-4"]
+[[slider_collection]]
+=== Layout Collection
+
+lorem:sentences[5]
+
+[role="mt-4"]
+[[slider_post]]
+=== Layout Posts
+
+lorem:sentences[5]
+/////
+
+/////
+[role="mt-4"]
+[[slider-videojs]]
+== Video Sliders
+
+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="swp-caption-content">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="swp-caption-content">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="swp-caption-content">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="swp-caption-content">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-4">
+
+  <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="swp-caption-content">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="swp-caption-content">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="swp-caption-content">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>
+++++
+/////
+
+
+/////
+/////