j1-template 2024.3.19 → 2024.3.21

data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc

@@ -107,7 +107,29 @@ mobile devices.
 
 
 [role="mt-5"]
-== Mini Player
+== AmplitudeJS
+
+The J1 Template suports *native audio* files (e.g. mp3) using *custom players*
+based on *AmplitudeJS* using the the (default) theme Uno. The color scheme
+used matches the look and feel of the template to preserve the page design.
+
+Three types of AmplitudeJS players are build-in for the J1 template system:
+
+* *Mini* Players
+* *Compact* Players (default payer)
+* *Large* Players
+
+[role="mt-4"]
+[NOTE]
+====
+Amplitude players for the J1 Template are mobile-friendly. Instead of
+clicking on the appropriate elements, touch events are applied to all
+mobile devices.
+====
+
+
+[role="mt-5"]
+=== Mini Players
 
 In the context of complex components on a web page, like an audio player,
 a mini player refers to a minimized version of full players. It typically
@@ -119,54 +141,65 @@ background without dedicating the entire screen to the player. They
 are commonly found on music streaming services, podcast platforms, and
 websites with embedded audio content.
 
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_mini[role="mt-3 mb-5"]
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_mini[role="mb-5"]
 
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_mini[role="mt-3 mb-5"]
-
-lorem:sentences[5]
 
 [role="mt-5"]
-== Compact Player
+=== Compact Players
+
+The design of a *Compact player* is an efficient approach that involves
+condensing the player controls and display elements into a smaller area.
+It allows the audio player to fit neatly within the web page's layout without
+overwhelming or dominating the content around it.
+
+The player aims to balance functionality and space efficiency, ensuring users
+can easily access and control the audio playback without sacrificing too much
+screen space or placing  multiple players side-by-side.
 
-A complex component like an audio player on a web page, *compact*
-typically refers to a design or layout that minimizes the component's
-space while maintaining its functionality and usability.
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_compact[role="mb-5"]
 
-////
-The *compact design* for an audio player is an efficient approach that
-involves condensing the player controls and display elements into a smaller
-area. It uses icons or symbols instead of text labels where possible, and
-possibly hides less frequently used features behind menus or dropdowns to
-reduce clutter, thereby instilling confidence in its effectiveness.
 
-A *compact* design allows the audio player to fit neatly within the web
-page's layout without overwhelming or dominating the content around it.
-The design aims to balance functionality and space efficiency, ensuring
-users can easily access and control the audio playback without sacrificing
-too much screen space.
-////
+[role="mt-5"]
+=== Large Players
 
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_compact[role="mt-3 mb-5"]
+A complex component, like an audio player on a web page, typically refers
+to a design or layout that minimizes the component's space while maintaining
+its functionality and usability.
 
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_compact[role="mt-3 mb-5"]
+The large design provides the full functionality of an audio player to ensure
+users can easily control audio playback. The player behaves similarly to a
+compact player, but all controls are displayed in a single window; there is
+no need to open other widgets.
 
-lorem:sentences[5]
+.Emancipator · From Dusk To Dawn
+amplitude::emancipator_large[role="mb-5"]
 
 
 [role="mt-5"]
-== Large Player
+== AmplitudeJS on Youtube
 
-lorem:sentences[5]
+The example demonstrates playing *Audio* track from *YouTube Video* using an
+AmplitudJS player. The J1 template uses the video *plugin ytp* to extend the
+native functionality of the AmplitudeJS API to playback YouTube files only for
+the audio part.
 
-.Emancipator · Dusk To Dawn
-amplitude::free_emancipator_large[role="mt-3 mb-5"]
+[role="mt-4 mb-5"]
+[CAUTION]
+====
+Playing audio tracks is currently supported only for videos from YouTube (YT).
+The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+player buttons and controls to manage a *playlist* of videos the same as known
+for native audio files.
+====
 
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_large[role="mt-3 mb-5"]
+.Bea and her Business · YouTube 2025
+amplitude::bea_yt_large[role="mb-5"]
 
-[role="mb-8"]
-lorem:sentences[3]
+[role="mt-4 mb-5"]
+[NOTE]
+====
+AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+players of type *large* are supported.
+====

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

@@ -1,7 +1,7 @@
 ---
-title:                                  J1 Amplitude App
-title_extention:                        YouTube Video Integration
-tagline:                                YouTube Video Integration
+title:                                  J1 Amplitude
+title_extention:                        YouTube Video 
+tagline:                                YouTube Video
 
 date:                                   2024-09-21
 #last_modified:                         2024-01-01
@@ -158,6 +158,7 @@ endif::[]
 
 
 ifeval::[{ytp--audio-player} == true]
+
 [role="mt-5"]
 == Amplitude YouTube Player
 
@@ -173,6 +174,7 @@ Find the complete *playlist* for Manon Mélodie on
 link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
 ====
 
+
 [role="mt-4"]
 [[manon_melodie]]
 === Manon Mélodie
@@ -180,24 +182,69 @@ link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
 lorem:sentences[3]
 
 .Manon Mélodie · YouTube 2025
-amplitude::manon_melodie_yt_large[role="mt-4 mb-5"]
+amplitude::manon_melodie_yt_large[role="mb-5"]
+
+[role="mt-4"]
+[[bea]]
+=== Bea and her Business
+
+lorem:sentences[3]
+
+.Bea and her Business · YouTube 2025
+amplitude::bea_yt_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Diana Krall
+
+lorem:sentences[3]
+
+.Diana Krall · YouTube
+amplitude::diana_krall_yt_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Ephraim Kishon
+
+lorem:sentences[5]
+
+[role="mt-4"]
+==== Beste Familiengeschichten
+
+lorem:sentences[3]
 
-// [role="mt-4"]
-// === Mimi Rutherfurt
+.Ephraim Kishon · Beste Familiengeschichten
+amplitude::familiengeschichten_yt_large[role="mb-5"]
 
-// lorem:sentences[3]
 
-// .Mimi Rutherfurt · Maritim Verlag
-// amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-5"]
+[role="mt-4"]
+==== Beste Autofahrergeschichten
+
+lorem:sentences[3]
+
+.Ephraim Kishon · Beste Autofahrergeschichten
+amplitude::autofahrer_geschichten_yt_large[role="mb-5"]
 
-// [role="mt-4"]
-// [[faelle_des_bnd]]
-// === Die größten Fälle des BND
 
-// lorem:sentences[3]
+[role="mt-4"]
+=== Disco 80th
+
+The large design provides the full functionality of an audio player to ensure
+users can easily control audio playback. The player behaves similarly to a
+compact player, but all controls are displayed in a single window; there is
+no need to open other widgets.
+
+.Royalty Free Music · Disco 80th
+amplitude::disco_large[role="mb-5"]
+
+
+[role="mt-4"]
+=== Mimi Rutherfurt
+
+lorem:sentences[3]
 
-// .Die größten Fälle des BND · Maritim Verlag
-// amplitude::faelle_des_bnd_yt_large[role="mt-4 mb-5"]
+.Mimi Rutherfurt · Maritim Verlag
+amplitude::mimi_rutherfurt_yt_large[role="mb-5"]
 
 endif::[]
 
@@ -221,7 +268,7 @@ ifeval::[{ms-slider-video--example} == true]
 lorem:sentences[5]
 
 .Slider using Video
-masterslider::ms_00010[role="mt-4 mb-5"]
+masterslider::ms_00010[role="mb-5"]
 
 
 [role="mt-5"]
@@ -232,7 +279,7 @@ upload, view, share, and comment on videos. The platform provides services
 for people and organizations to publish various video content.
 
 .Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
-youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mb-5"]
 
 
 [role="mt-5"]
@@ -242,5 +289,5 @@ VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
 
 .Video over VideoJS
-gallery::jg_video_html5_videojs[role="mt-4 mb-5"]
+gallery::jg_video_html5_videojs[role="mb-5"]
 endif::[]

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

@@ -0,0 +1,87 @@
+---
+title:                                  J1 Swiper
+title_extention:                        Replacemant for Backstretch
+tagline:                                Replacemant for Backstretch
+date:                                   2025-05-22
+#last_modified:                         2025-01-01
+
+description: >
+                                        SwiperJS is a Javascript 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 those viewed on desktop computers, tablets, or
+                                        smartphones.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, sliders, carousels, SwiperJS
+
+categories:                             [ Tester ]
+tags:                                   [ SwiperJS ]
+
+image:
+  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+compress:                               false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tools/tester/swiper/
+
+resources:                              [ swiperjs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      enabled:                          false
+      slides:
+        - url:                          //kj.de/images/media/6078_20579.jpg
+          alt:                          Diana Krall
+---
+
+// 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" %}
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+swiper::attic_swiper[role="mb-8"]
+
+// ++++
+// <!-- Swiper elements (El) -->
+// <div id="swiper_image_base" class="swiper swiper-container">
+//   <!-- Swiper Wrapper (slides) -->
+//   <ul class="swiper-wrapper">
+//     <!-- flat swiper slide HTML -->
+//     <li class="swiper-slide">
+//       <img src="/assets/image/module/swiper/simple/test/image/diana_krall.jpg" alt="Slide Image diana_krall">
+//     </li>
+//   </ul>
+//   <!-- END Swiper Wrapper (slides) -->
+// </div>
+// <!-- END Swiper Container (elements) -->
+// ++++

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

@@ -75,7 +75,7 @@ all types of websites, such as those viewed on desktop computers, tablets, or
 smartphones.
 
 
-[role="mt-5"]
+[role="mt-4"]
 == What SwiperJS Apps are
 
 SwiperJS Apps are preconfigured swipers (sliders) that use the SwiperJS API as
@@ -120,7 +120,7 @@ A more *emphasized* type of a **text**-based swiper is a *parallax* text
 swiper. If you want to *focus* the meaning, this kind of a swiper may be
 nteresting. Parallax text sliders can be placed as *banners* on a page.
 
-.Extended Text Swiper ·  Parallax
+.Extended Text Swiper · Parallax
 swiper::swiper_text_parallax[role="mt-4 mb-5"]
 
 
@@ -145,7 +145,7 @@ below the Swiper App indicate how *many* slides (images) the slide show
 *contains* for improved usage experience.
 
 .Image Swiper · Full-width + Pagination
-swiper::swiper_image_base_full_width_pagination[role="mt-4 mb-5"]
+swiper::swiper_image_base_full_width_pagination[role="mt-3"]
 
 [role="mt-4"]
 ==== Equal Image Sizes
@@ -156,9 +156,10 @@ many facts to know animated for the reader's attention within a single
 line.
 
 .Equal Image Sizes · Captions + Navigation + Pagination
-swiper::swiper_image_base_navigation_pagination_lightbox[role="mt-4 mb-4"]
+swiper::swiper_image_base_navigation_pagination[role="mt-3"]
 
-[role="mt-5"]
+
+[role="mt-4"]
 ==== Mixed Image Sizes
 
 Pictures you've made are typically *not even in size*. Images may have the
@@ -166,7 +167,7 @@ same size (resolution), but some are orientated *landscape*, or others may
 be *portrait*. For that reason, a more powerful swiper is needed to create
 so-called justified slides.
 
-.Mixed Image Sizes · Captions + Lightbos
+.Mixed Image Sizes · Captions + Lightbox
 swiper::swiper_image_base_captions[role="mt-4 mb-4"]
 
 
@@ -222,7 +223,7 @@ presented *images*.
 ++++
 <div class="swiper-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Extendend Swiper · Layout Thumb Right + Captions </div>
 <div class="container g-0 mb-5">
-    <div class="row gx-1">
+    <div id="thumb_view_row" class="row gx-1">
 
       <!-- Thumb View (main) -->
       <div class="col-md-9">
@@ -255,7 +256,11 @@ presented *images*.
                 <div class="swp-caption-content">Little Bird</div>
               </li>
             </ul> <!-- END Swiper wrapper -->
-        </div> <!-- END Swiper container  -->
+
+            <!-- Outer Pagination -->
+            <div id="thumb_view_row_pagination" class="swiper-pagination-outer"></div>
+
+        </div> <!-- END Swiper container  -->        
       </div> <!-- END Thumb View (main)  -->
 
       <!-- Thumb View (thumbs/right) -->
@@ -293,6 +298,10 @@ presented *images*.
       </div> <!-- END Thumb View (thumbs/right) -->
 
     </div> <!-- END BS row -->
+
+    <!-- Outer Pagination -->
+    <!--div class="swiper-pagination-outer"></div -->
+
 </div> <!-- END BS container -->
 
 <script>
@@ -318,10 +327,14 @@ $(function() {
         }
       });
 
-      // Initialize Master instance (right)
+      // Initialize Master instance
       var masterSwiper2 = new Swiper('#master_slider_2', {        
         direction: 'horizontal',
         grabCursor: true,
+        pagination: {
+          el: '.swiper-pagination-outer',
+          clickable: true,
+        },        
         effect: 'fade',
           fadeEffect: {
           crossFade: true
@@ -339,6 +352,22 @@ $(function() {
         }
       });
 
+      // workaround for swiper pagination placed 'outer'
+      // ---------------------------------------------------------------
+      {% assign init_swiper_delay  = 500 %}
+      {% assign pagination_enabled = true %}
+
+      {% if pagination_enabled %}
+      setTimeout(() => {
+        const sourceEl = document.getElementById('thumb_view_row_pagination');
+        const targetEl = document.getElementById('thumb_view_row');
+        targetEl.appendChild(sourceEl);
+
+        // logger.debug('\n' + 'pagination elements (outer) moved');
+      }, {{init_swiper_delay}});
+      {% endif %}
+      // ---------------------------------------------------------------
+
       clearInterval(dependencies_met_page_ready);
     } // END pageVisible
   }, 10); // END dependencies_met_page_ready
@@ -476,43 +505,49 @@ $(function() {
 
 lorem:sentences[5]
 
+.Extendend Swiper · Layout Stacked
+swiper::swiper_image_stacked[role="mt-4 mb-5"]
+
+////
 ++++
-<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Extendend Swiper · Layout Stacked</div>
-<!-- Posters slider -->
+<div class="carousel-title"> <i class="mdib mdib-view-carousel mdib-24px mr-2"></i> Extendend Swiper · Layout Stacked (manual)</div>
+<!-- Stacked slider -->
 <div id="stacked_slider" class="stacked-slider mt-3">
-  <div class="swiper swiper-container">
+  <div id="stacked_slider_swiper_container" class="swiper swiper-container">
 
     <ul class="swiper-wrapper">
       <li class="swiper-slide">
         <!-- set image parallax scale for nice zoom effect -->
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/1.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/1.jpg" alt="">
       </li>
       <li class="swiper-slide">
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/2.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/2.jpg" alt="">
       </li>
       <li class="swiper-slide">
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/3.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/3.jpg" alt="">
       </li>
       <li class="swiper-slide">
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/4.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/4.jpg" alt="">
       </li>
       <li class="swiper-slide">
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/5.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/5.jpg" alt="">
       </li>
       <li class="swiper-slide">
-        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/poster/image/6.jpg" alt="">
+        <img data-swiper-parallax-scale="1.1" src="/assets/image/module/swiper/extended/stacked/image/6.jpg" alt="">
       </li>
-    </ul>
+    </ul> <!-- END Swiper Wrapper (slides) -->
 
-  </div>
-</div>
-++++
+    <!-- Pagination -->
+    <!-- div id="stacked_slider_pagination" class="swiper-pagination-outer"></div -->
+    <div id="stacked_slider_pagination" class="swiper-pagination-inner"></div>
+
+  </div> <!-- END Swiper Container (elements) -->
+</div> <!-- END Swiper stacked_slider -->
 
-++++
 <script>
 $(function() {
 
-  function createPostersSlider(el) {
+  function LayoutStacked(el) {
     const swiperEl = el.querySelector('.swiper');
 
     const calcNextOffset = () => {
@@ -524,12 +559,25 @@ $(function() {
       return `${nextOffsetVh}%`;
     };
 
-    const postersSwiper = new Swiper(swiperEl, {      
+    const onLastSlide = (swiper) => {
+      console.log ('\n' + 'LayoutStacked, Entered event: reachEnd');
+      // swiper.allowTouchMove = false;
+      // swiper.allowSlidePrev = false;
+      // swiper.allowSlideNext = false;
+    };
+
+    const stackedSwiper = new Swiper(swiperEl, {      
       effect: 'creative',
       speed: 600,
       resistanceRatio: 0,
       grabCursor: true,
       parallax: true,
+      pagination: {
+      //el: '.swiper-pagination-outer',
+        el: '.swiper-pagination-inner',
+        type: 'bullets',
+        clickable: true
+      },      
       creativeEffect: {
         limitProgress: 3,
         perspective: true,
@@ -543,26 +591,52 @@ $(function() {
         },
       },
       on: {
-        init: (swiper) => { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+        init:     (swiper) => { 
+          var slideHeight = 900;
+          swiper.slides.forEach(slide => {
+            slide.style.height = `${slideHeight}px`;
+          });
+        },
+        // reachEnd: (swiper) => { 
+        //   onLastSlide(swiper);
+        // }
       }
     });
 
     const onResize = () => {
-      if (!postersSwiper || postersSwiper.destroyed) return;
+      if (!stackedSwiper || stackedSwiper.destroyed) return;
       // prettier-ignore
-      postersSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
+      stackedSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
       if (
-        postersSwiper.params.resizeObserver &&
+        stackedSwiper.params.resizeObserver &&
         typeof window.ResizeObserver !== 'undefined'
       ) {
-        postersSwiper.update();
+        stackedSwiper.update();
       }
     };
     window.addEventListener('resize', onResize);
 
-    return postersSwiper;
 
-  } // END createPostersSlider
+    // workaround for swiper pagination placed 'outer'
+    // -------------------------------------------------------------------------
+    {% assign init_swiper_delay   = 500 %}
+    {% assign pagination_el       = swiper.module_settings.pagination.el | split: '-' %}
+    {% assign pagination_position = pagination_el[2] %}
+
+    setTimeout(() => {
+      // const sourceEl = document.getElementById('{{swiper.id}}_pagination');
+      // const targetEl = document.getElementById('{{swiper.id}}');
+      const sourceEl = document.getElementById('stacked_slider_pagination');
+      const targetEl = document.getElementById('stacked_slider_swiper_container');
+      // targetEl.appendChild(sourceEl);
+
+      // logger.debug('\n' + 'pagination elements (outer) moved');
+    }, {{init_swiper_delay}});
+    // -------------------------------------------------------------------------
+
+    return stackedSwiper;
+
+  } // END LayoutStacked
 
   // ---------------------------------------------------------------------------
   // Swiper initializer
@@ -573,7 +647,7 @@ $(function() {
     if (atticFinished) {
       const sliderEl = document.querySelector('#stacked_slider');
 
-      createPostersSlider(sliderEl);
+      LayoutStacked(sliderEl);
 
       clearInterval(dependencies_met_page_ready);
     } // END pageVisible
@@ -583,7 +657,7 @@ $(function() {
 }); // END Document READY
 </script>
 ++++
-
+////
 
 [role="mt-5"]
 ==== Layout Expanding
@@ -595,7 +669,7 @@ lorem:sentences[3]
 <div id="app" class="extended-app">
   <!-- Style expanding-slide should wrap the swiper for Effect: Expanding  -->
   <div id="expanding_slides" class="expanding-slide mt-4">
-    <div class="swiper swiper-container">
+    <div id="expanding_slides_swiper_container" class="swiper swiper-container">
 
         <ul class="swiper-wrapper">
             <!-- First slide -->
@@ -702,6 +776,12 @@ lorem:sentences[3]
             </li>
         </ul> <!-- END Swiper wrapper -->
 
+          <!-- Inner Pagination -->
+          <!-- div class="swiper-pagination-inner"></div -->
+
+        <!-- Outer pagination, NOT moved by SwiperJS Adapter (workaround) -->
+        <div class="swiper-pagination-outer"></div>
+
     </div> <!-- END Swiper container -->
   </div> <!-- END expanding_slides -->
 </div> <!-- END app -->
@@ -771,7 +851,12 @@ $(function() {
 
     const swiper = new Swiper(swiperEl, {
       speed: 600,
-      // resistanceRatio: 0,
+      pagination: {
+        el: '.swiper-pagination-outer',
+        type: 'bullets',
+        clickable: true
+      },
+      resistanceRatio: 0,
       // slidesPerView: 'auto',
       // centeredSlides: true,
       on: {