j1-template 2024.3.18 → 2024.3.19

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

@@ -1,655 +0,0 @@
-# ------------------------------------------------------------------------------
-# ~/_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