j1-template 2024.3.17 → 2024.3.18

data/lib/starter_web/_data/modules/swiper.yml

@@ -1,6 +1,6 @@
 # ------------------------------------------------------------------------------
 # ~/_data/modules/swiper.yml
-# User configuration settings for J1 Swiper module
+# User configuration settings for J1 Swiper Sliders
 #
 # Product/Info:
 # https://jekyll.one
@@ -23,205 +23,633 @@ description:
 # User configuration settings
 #
 settings:
-  enabled:                              true
 
   # ----------------------------------------------------------------------------
-  # Global Lightbox options
-  #
-  lightbox:
-    enabled:                            false
-    caption:                            caption
-    background:                         false
-
+  # GLOBAL settings
   # ----------------------------------------------------------------------------
-  # Caption options (Carousel)
-  #
-  captions:
-    enabled:                            true
+  enabled:                              true
 
   # ----------------------------------------------------------------------------
-  # Carousel settings
+  # SLIDER settings
   # ----------------------------------------------------------------------------
-  carousels:
+  sliders:
 
     # --------------------------------------------------------------------------
-    # IMAGE Carousel
+    # TEXT Sliders
     # --------------------------------------------------------------------------
-    #
-    - carousel:
+
+    # --------------------------------------------------------------------------
+    # TEXT Slider (Base)
+    #    
+    - slider:
+
+      # ------------------------------------------------------------------------
+      # SLIDER general settings
+      #
       enabled:                          true
+      type:                             text
+
+      id:                               swiper_text_base
+      layout:                           text_base
+      playlist:                         text_playlist
+      swiper_container_classes:         swiper--text
+
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      #
+
+      # ------------------------------------------------------------------------
+      # Parameters (Core)
+      #      
+      parameters:    
+        loop:                           true
 
-      id:                               image_carousel_simple
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
+      #
+      module_settings:
+        autoplay:
+          delay:                        3000
+          pauseOnMouseEnter:            true
+          disableOnInteraction:         false      
+
+      # ------------------------------------------------------------------------
+      # SWIPER Events
+      #
+      # events:
+      #   init: >
+      #                                   function (swiper) {
+      #                                     // do something on initialization
+      #                                     console.log ('\n' + 'Entered event: init');
+      #                                   }
+      #   afterInit: >
+      #                                   function (swiper) {
+      #                                     // do something after initialization
+      #                                     console.log ('\n' + 'Entered event: afterInit');
+      #                                   }
+
+
+    # --------------------------------------------------------------------------
+    # IMAGE Sliders
+    # --------------------------------------------------------------------------
+
+    # --------------------------------------------------------------------------
+    # IMAGE Base Slider - Captions + Pagination
+    #
+    - slider:
+
+      # ------------------------------------------------------------------------
+      # SLIDER general settings
+      #      
+      enabled:                          true
       type:                             image
-      template:                         standard
-      gutters:                          0                                       # 0 .. 5
-      image_base_path:                  /assets/image/modules/gallery/mega_cities
-      image_styles:                     img-fluid img-object--cover
-      image_height:                     300px
+
+      id:                               swiper_image_base_captions
+      layout:                           image_base
+      playlist:                         mega_cities_1
+      container_classes:                false
+#     wrapper_classes:                  "margin-bottom: 3.75rem;"
+      wrapper_classes:                  false
 
       # ------------------------------------------------------------------------
-      # Lightbox options
+      # SLIDER caption settings
       #
-      lightbox:
-        enabled:                        false
+      captions:                             
+        enabled:                        true
+
+        css_class:                      swp-caption-content
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # LIGHTBOX options
       #
-      captions:
-        enabled:                        false
-        position:                       bottom                                  # top|bottom|center
+      lightbox:
+        enabled:                        true
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX caption settings
+        #
+        captions:
+          enabled:                      true
+
+          css_class:                    pswp-caption-content
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX Parameters (Core)
+        #
+        parameters:
+          children:                     a
+          bgOpacity:                    1
+          showHideOpacity:              true
+          loop:                         true
+          wheelToZoom:                  true
+          showHideAnimationType:        zoom
+          imageClickAction:             next
+          tapAction:                    next
+          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX user interface (UI Controls)
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
+ 
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      # ------------------------------------------------------------------------
+
+      # ------------------------------------------------------------------------
+      # Parameters (Core)
+      #      
+      parameters:
+        autoHeight:                     true
+        slidesPerView:                  2
+        slidesPerGroup:                 2
+        spaceBetween:                   5
 
       # ------------------------------------------------------------------------
-      # Carousel options
+      # SWIPER Module settings
       #
-      options:
-        autoplay:                       false
-        arrows:                         false
-        dots:                           false
-        speed:                          300
-        slidesToShow:                   2
-        slidesToScroll:                 2
-        responsive:                     true
+      module_settings:
+        pagination:
+          el:                           .swiper-pagination
+          type:                         bullets
+          clickable:                    true
 
       # ------------------------------------------------------------------------
-      # Reponsive options
+      # SWIPER Events
       #
-      responsive:
-        - breakpoint:
-          settings:
-            breakOn:                    1024
-            slidesToShow:               2
-            slidesToScroll:             2
-        - breakpoint:
-          settings:
-            breakOn:                    800
-            slidesToShow:               1
-            slidesToScroll:             1
-        - breakpoint:
-          settings:
-            breakOn:                    480
-            dots:                       false
-            slidesToShow:               1
-            slidesToScroll:             1
+      events:
+        init: >
+                                        function (swiper) { var slideHeight = 300; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+
+    # --------------------------------------------------------------------------
+    # IMAGE Base Slider - Captions + Pagination + Lightbox
+    #
+    - slider:
 
       # ------------------------------------------------------------------------
-      # Slides
+      # SLIDER general settings
+      #      
+      enabled:                          true
+      type:                             image
+
+      id:                               swiper_image_base_lightbox
+      layout:                           image_base
+      playlist:                         free_animals
+      container_classes:                false
+      wrapper_classes:                  false
+
+      # ------------------------------------------------------------------------
+      # SLIDER caption settings
       #
-      slides:
+      captions:                             
+        enabled:                        true
 
-        - slide:                        # slide 1
-          image:                        denys-nevozhai-1_b.jpg
-          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
+        css_class:                      swp-caption-content
 
-        - slide:                        # slide 2
-          image:                        thomas-tucker_b.jpg
-          caption:                      Sunset over Taipei City - Taiwan
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      lightbox:
+        enabled:                        true
 
-        - slide:                        # slide 3
-          image:                        emmad-mazhari_b.jpg
-          caption:                      Chicago - United States
+        # ----------------------------------------------------------------------
+        # LIGHTBOX caption settings
+        #
+        captions:
+          enabled:                      true
+
+          css_class:                    pswp-caption-content
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX Parameters (Core)
+        #
+        parameters:
+          children:                     a
+          bgOpacity:                    1
+          showHideOpacity:              true
+          loop:                         true
+          wheelToZoom:                  true
+          showHideAnimationType:        zoom
+          imageClickAction:             next
+          tapAction:                    next
+          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX user interface (UI Controls)
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
 
-        - slide:                        # slide 4
-          image:                        johan-mouchet_b.jpg
-          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      # ------------------------------------------------------------------------
 
-        - slide:                        # slide 5
-          image:                        federico-rizzarelli_b.jpg
-          caption:                      Shanghai - China
+      # ------------------------------------------------------------------------
+      # Parameters (Core)
+      #      
+      parameters:
+        autoHeight:                     true
+        slidesPerView:                  2
+        slidesPerGroup:                 2
+        spaceBetween:                   5
 
-        - slide:                        # slide 6
-          image:                        gints-gailis_b.jpg
-          caption:                      Shangri-La Hotel Jakarta - Indonesia
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
+      #
+      module_settings:
+        pagination:
+          el:                           .swiper-pagination
+          type:                         bullets
+          clickable:                    true
+#         renderBullet: >
+#                                       function (index, className) { return `<span class="${className}"> ${++index} </span>`; }
+
+      # ------------------------------------------------------------------------
+      # SWIPER Events
+      #
+      events:
+        init: >
+                                        function (swiper) { var slideHeight = 300; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+#       afterInit: >
+#                                       function (swiper) { console.log ('Entered event: afterInit'); }
 
 
     # --------------------------------------------------------------------------
-    # IMAGE Carousel + Captions + Lightbox
-    # --------------------------------------------------------------------------
+    # IMAGE Slider Extended - Panorama View
     #
-    - carousel:
-      enabled:                          false
+    - slider:
 
-      id:                               image_carousel_full
+      # ------------------------------------------------------------------------
+      # SLIDER general settings
+      #      
+      enabled:                          true
       type:                             image
-      gutters:                          1                                       # 0 .. 5
-      image_base_path:                  /assets/image/modules/gallery/mega_cities
-      image_styles:                     img-fluid img-object--cover
-      image_height:                     300px
+
+      id:                               swiper_image_panorama
+      layout:                           image_base
+      playlist:                         panorama
+      container_classes:                false
+      wrapper_classes:                  "height: 240px; padding: 14px 0;"
+
+      # ------------------------------------------------------------------------
+      # SLIDER caption settings
+      #
+      captions:                             
+        enabled:                        false
+
+        css_class:                      swp-caption-content
 
       # ------------------------------------------------------------------------
-      # Lightbox options
+      # LIGHTBOX options
       #
       lightbox:
-        enabled:                        true
+        enabled:                        false
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX caption settings
+        #
+        captions:
+          enabled:                      true
+
+          css_class:                    pswp-caption-content
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX Parameters (Core)
+        #
+        parameters:
+          children:                     a
+          bgOpacity:                    1
+          showHideOpacity:              true
+          loop:                         true          
+          effect:                       fade
+          fadeEffect:                   { crossFade: true }
+#         parallax:                     true
+          wheelToZoom:                  true
+          showHideAnimationType:        zoom
+          imageClickAction:             next
+          tapAction:                    next
+          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX user interface (UI Controls)
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
+ 
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      # ------------------------------------------------------------------------
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # Parameters (Core)
+      #      
+      parameters:
+        effect:                         panorama
+        slidesPerView:                  1.5
+        loop:                           true
+#       speed:                          200
+        loopAdditionalSlides:           1
+        centeredSlides:                 true
+        grabCursor:                     true
+        breakpoints: {
+                                        480: {
+                                          slidesPerView: 2,
+                                          panoramaEffect: {
+                                            rotate: 35,
+                                            depth: 150,
+                                          },
+                                        },
+                                        640: {
+                                          slidesPerView: 3,
+                                          panoramaEffect: {
+                                            rotate: 30,
+                                            depth: 150,
+                                          },
+                                        },
+                                        1024: {
+                                          slidesPerView: 4,
+                                          panoramaEffect: {
+                                            rotate: 30,
+                                            depth: 200,
+                                          },
+                                        },
+                                        1200: {
+                                          slidesPerView: 4,
+                                          panoramaEffect: {
+                                            rotate: 25,
+                                            depth: 250,
+                                          },
+                                        }
+        }
+
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
       #
-      captions:
-        enabled:                        true
-        position:                       bottom                                  # top|bottom|center
+      module_settings:
+        modules:                        [ EffectPanorama ]
+#       pagination:
+#         el:                           .swiper-pagination
+#         dynamicBullets:               true
+#         dynamicMainBullets:           3
+        panorama:
+          on_click:                     next                                    # false | next
+          depth:                        200
+          rotate:                       30
+
+    # --------------------------------------------------------------------------
+    # IMAGE Slider Extended - Neigbor View
+    #
+    - slider:
 
       # ------------------------------------------------------------------------
-      # Carousel options
+      # SLIDER general settings
+      #      
+      enabled:                          true
+      type:                             image
+
+      id:                               swiper_image_neighbor
+      layout:                           image_base
+      playlist:                         neighbor
+      container_classes:                false
+      wrapper_classes:                  "height: 300px; padding: 14px 0;"
+
+      # ------------------------------------------------------------------------
+      # SLIDER caption settings
       #
-      options:
-        autoplay:                       false
-        arrows:                         true
-        dots:                           true
-        speed:                          300
-        slidesToShow:                   2
-        slidesToScroll:                 2
-        responsive:                     true
+      captions:                             
+        enabled:                        false
+
+        css_class:                      swp-caption-content
 
       # ------------------------------------------------------------------------
-      # Reponsive options
+      # LIGHTBOX options
       #
-      responsive:
-        - breakpoint:
-          settings:
-            breakOn:                    1024
-            slidesToShow:               2
-            slidesToScroll:             2
-        - breakpoint:
-          settings:
-            breakOn:                    800
-            slidesToShow:               1
-            slidesToScroll:             1
-        - breakpoint:
-          settings:
-            breakOn:                    480
-            slidesToShow:               1
-            slidesToScroll:             1
+      lightbox:
+        enabled:                        false
 
+        # ----------------------------------------------------------------------
+        # LIGHTBOX caption settings
+        #
+        captions:
+          enabled:                      true
+
+          css_class:                    pswp-caption-content
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX Parameters (Core)
+        #
+        parameters:
+          children:                     a
+          bgOpacity:                    1
+          showHideOpacity:              true
+          loop:                         true
+          wheelToZoom:                  true
+          showHideAnimationType:        zoom
+          imageClickAction:             next
+          tapAction:                    next
+          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX USER INTERFACE controls
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
+ 
       # ------------------------------------------------------------------------
-      # Slides
+      # SWIPER settings
+      # ------------------------------------------------------------------------
+
+      # ------------------------------------------------------------------------
+      # Parameters (Core)
+      #      
+      parameters:
+#       effect:                         panorama
+        slidesPerView:                  1.3
+        loop:                           true
+        loopAdditionalSlides:           1
+        centeredSlides:                 true
+        grabCursor:                     true
+        # breakpoints: {
+        #                                 480: {
+        #                                   slidesPerView: 2,
+        #                                   panoramaEffect: {
+        #                                     rotate: 35,
+        #                                     depth: 150,
+        #                                   },
+        #                                 },
+        #                                 640: {
+        #                                   slidesPerView: 3,
+        #                                   panoramaEffect: {
+        #                                     rotate: 30,
+        #                                     depth: 150,
+        #                                   },
+        #                                 },
+        #                                 1024: {
+        #                                   slidesPerView: 4,
+        #                                   panoramaEffect: {
+        #                                     rotate: 30,
+        #                                     depth: 200,
+        #                                   },
+        #                                 },
+        #                                 1200: {
+        #                                   slidesPerView: 4,
+        #                                   panoramaEffect: {
+        #                                     rotate: 25,
+        #                                     depth: 250,
+        #                                   },
+        #                                 }
+        # }
+
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
+      #
+      module_settings:
+        modules:                        [ EffectPanorama ]
+#       pagination:
+#         el:                           .swiper-pagination
+#         dynamicBullets:               true
+#         dynamicMainBullets:           3
+#       panorama:
+#         on_click:                     next                                    # false | next
+#         depth:                        150
+#         rotate:                       45
+
+    # --------------------------------------------------------------------------
+    # IMAGE Slider Extended - Thumbs View
+    #
+    - slider:
+
+      # ------------------------------------------------------------------------
+      # SLIDER general settings
+      #      
+      enabled:                          true
+      type:                             image
+
+      id:                               thumb_slider_animals
+      layout:                           image_base
+      playlist:                         free_animals
+      container_classes:                false
+      wrapper_classes:                  false                                   # "height: 300px; padding: 14px 0;"
+
+      # ------------------------------------------------------------------------
+      # SLIDER caption settings
       #
-      slides:
+      captions:                             
+        enabled:                        true
 
-        - slide:                        # slide 1
-          image:                        denys-nevozhai-1_b.jpg
-          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
+        css_class:                      swp-caption-content
 
-        - slide:                        # slide 2
-          image:                        thomas-tucker_b.jpg
-          caption:                      Sunset over Taipei City - Taiwan
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      lightbox:
+        enabled:                        false
 
-        - slide:                        # slide 3
-          image:                        emmad-mazhari_b.jpg
-          caption:                      Chicago - United States
+        # ----------------------------------------------------------------------
+        # LIGHTBOX caption settings
+        #
+        captions:
+          enabled:                      true
+
+          css_class:                    pswp-caption-content
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX Parameters (Core)
+        #
+        parameters:
+          children:                     a
+          bgOpacity:                    1
+          showHideOpacity:              true
+          loop:                         true
+          wheelToZoom:                  true
+          showHideAnimationType:        zoom
+          imageClickAction:             next
+          tapAction:                    next
+          padding:                      { top: 0, bottom: 0, left: 80, right: 80 }
+
+        # ----------------------------------------------------------------------
+        # LIGHTBOX user interface (UI Controls)
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
+ 
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      # ------------------------------------------------------------------------
 
-        - slide:                        # slide 4
-          image:                        johan-mouchet_b.jpg
-          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
+      #
+      module_settings:
+        modules:                        [ EffectThumbs ]                        # Swiper modules for J1 are to specied (to be loaded)
+        thumbs:
+          speed:                        1000
+          main_slider_id:               thumb_slider_animals                    # should ALWAYS an id (NOT a class)
+          autoHeight:                   true
+          grabCursor:                   true
+          placement:                    top
+          spaceBetween:                 5
+          slidesPerView:                3
 
-        - slide:                        # slide 5
-          image:                        federico-rizzarelli_b.jpg
-          caption:                      Shanghai - China
+      # ------------------------------------------------------------------------
+      # SWIPER Events
+      #
+      events:
+        # init: >
+        #                                 function (swiper) { var slideHeight = 550; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+        # slideChangeTransitionStart: >
+        #                                 function (swiper) { thumbSlider.slideTo(swiper.activeIndex); }
+
+    # --------------------------------------------------------------------------
+    # VIDEO Sliders
+    # --------------------------------------------------------------------------
 
-        - slide:                        # slide 6
-          image:                        gints-gailis_b.jpg
-          caption:                      Shangri-La Hotel Jakarta - Indonesia
 
 # ------------------------------------------------------------------------------
 # END config