j1-template 2024.3.16 → 2024.3.18

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

@@ -0,0 +1,655 @@
+# ------------------------------------------------------------------------------
+# ~/_data/modules/swiper.yml
+# User configuration settings for J1 Swiper Sliders
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2023, 2024 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+# -----------------------------------------------------------------------------
+
+# ------------------------------------------------------------------------------
+# Description
+#
+description:
+  title:                                J1 Swiper
+  scope:                                User settings
+  location:                             _data/modules/swiper.yml
+
+# ------------------------------------------------------------------------------
+# User configuration settings
+#
+settings:
+
+  # ----------------------------------------------------------------------------
+  # GLOBAL settings
+  # ----------------------------------------------------------------------------
+  enabled:                              true
+
+  # ----------------------------------------------------------------------------
+  # SLIDER settings
+  # ----------------------------------------------------------------------------
+  sliders:
+
+    # --------------------------------------------------------------------------
+    # TEXT Sliders
+    # --------------------------------------------------------------------------
+
+    # --------------------------------------------------------------------------
+    # 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
+
+      # ------------------------------------------------------------------------
+      # 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
+
+      id:                               swiper_image_base_captions
+      layout:                           image_base
+      playlist:                         mega_cities_1
+      container_classes:                false
+#     wrapper_classes:                  "margin-bottom: 3.75rem;"
+      wrapper_classes:                  false
+
+      # ------------------------------------------------------------------------
+      # SLIDER caption settings
+      #
+      captions:                             
+        enabled:                        true
+
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      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
+
+      # ------------------------------------------------------------------------
+      # SWIPER Module settings
+      #
+      module_settings:
+        pagination:
+          el:                           .swiper-pagination
+          type:                         bullets
+          clickable:                    true
+
+      # ------------------------------------------------------------------------
+      # SWIPER Events
+      #
+      events:
+        init: >
+                                        function (swiper) { var slideHeight = 300; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+
+    # --------------------------------------------------------------------------
+    # IMAGE Base Slider - Captions + Pagination + Lightbox
+    #
+    - slider:
+
+      # ------------------------------------------------------------------------
+      # 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
+      #
+      captions:                             
+        enabled:                        true
+
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      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
+
+      # ------------------------------------------------------------------------
+      # 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 Slider Extended - Panorama View
+    #
+    - slider:
+
+      # ------------------------------------------------------------------------
+      # SLIDER general settings
+      #      
+      enabled:                          true
+      type:                             image
+
+      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:
+        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
+      # ------------------------------------------------------------------------
+
+      # ------------------------------------------------------------------------
+      # 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
+      #
+      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:
+
+      # ------------------------------------------------------------------------
+      # 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
+      #
+      captions:                             
+        enabled:                        false
+
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      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
+ 
+      # ------------------------------------------------------------------------
+      # 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
+      #
+      captions:                             
+        enabled:                        true
+
+        css_class:                      swp-caption-content
+
+      # ------------------------------------------------------------------------
+      # LIGHTBOX options
+      #
+      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 (UI Controls)
+        #
+        ui_controls:
+          zoom:                         false
+          close:                        true
+          counter:                      true
+          arrowKeys:                    false
+
+        # ----------------------------------------------------------------------
+        # KEYBOARD controls
+        #
+        kbd_controls:
+          escKey:                       true
+ 
+      # ------------------------------------------------------------------------
+      # SWIPER settings
+      # ------------------------------------------------------------------------
+
+      # ------------------------------------------------------------------------
+      # 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
+
+      # ------------------------------------------------------------------------
+      # 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
+    # --------------------------------------------------------------------------
+
+
+# ------------------------------------------------------------------------------
+# END config