refs #32137 - EDW paragraph carousel

modules/edw_paragraphs_carousel/components/slider-item/slider-item.css

@@ -17,18 +17,16 @@
 .carousel-item--default .slide-item__media .field-media {
   height: 100%;
 }
+.carousel-item--default .slide-item__media .field-media .contextual-region {
+  height: 100%;
+}
 .carousel-item--default .slide-item__media img {
   z-index: -2;
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
-.carousel-item--default .slide-item__media:before {
-  content: "";
-  background: rgba(0, 0, 0, 0.5);
-  z-index: -1;
-}
 .carousel-item--default .w-content {
   max-width: var(--container-mw);
   margin-inline: auto;
@@ -51,3 +49,12 @@
 .carousel-item--default .field-link {
   margin-top: 1.25rem;
 }
+.slider:not(.full-width) .carousel-item--default {
+  padding-top: 0;
+}
+.slider:not(.full-width) .carousel-item--default .slide-item__media:before {
+  content: unset;
+}
+.slider:not(.full-width) .carousel-item--default .w-content {
+  display: none;
+}

modules/edw_paragraphs_carousel/components/slider/slider.component.yml

@@ -36,6 +36,21 @@ props:
       title: Autoplay speed
       description: Autoplay speed in ms.
       default: true
+    slides_to_show:
+      type: integer
+      title: Slides to show
+      description: Number of slides to show, default -> 1.
+      default: 1
+    slides_to_scroll:
+      type: integer
+      title: Slides to scroll
+      description: Number of slides to scroll, default -> 1.
+      default: 1
+    extra_options:
+      type: string
+      title: Extra options
+      description: 'Extra options in JSON format, e.g., {"centerMode": true, "centerPadding": "60px"}.'
+      default: ''
 
     slider_classes:
       type: array
@@ -49,6 +64,7 @@ props:
       title: Attributes
       description: A list of HTML attributes for the slider
 
+
 slots:
   slide_slot_main:
     title: Main
@@ -58,4 +74,3 @@ libraryOverrides:
   dependencies:
     - edw_paragraphs_carousel/carousel
     - core/once
-

modules/edw_paragraphs_carousel/components/slider/slider.css

@@ -139,3 +139,7 @@
     }
   }
 }
+
+.slider:not(.full-width) .slick-slide {
+  height: 100%;
+}

modules/edw_paragraphs_carousel/components/slider/slider.js

@@ -6,21 +6,40 @@
 (function ($, Drupal, once) {
   Drupal.behaviors.carousel = {
     attach: function (context, settings) {
+      function safeJSONParse(str, fallback = {}) {
+        try {
+          return JSON.parse(str);
+        } catch (e) {
+          console.warn("Invalid JSON in data-extra-options:", str);
+          return fallback;
+        }
+      }
       once('carousel', '.slider', context).forEach(function (carousel) {
         const dots = JSON.parse(carousel.getAttribute('data-dots'));
         const arrows = JSON.parse(carousel.getAttribute('data-arrows'));
         const infinite = JSON.parse(carousel.getAttribute('data-infinite'));
         const fade = JSON.parse(carousel.getAttribute('data-fade'));
         const autoplay = JSON.parse(carousel.getAttribute('data-autoplay'));
-        const autoplaySpeed = JSON.parse(carousel.getAttribute('data-autoplay-speed'));
+        const slidesToShow = parseInt(carousel.getAttribute('data-slides-to-show'), 10);
+        const slidesToScroll = parseInt(carousel.getAttribute('data-slides-to-scroll'), 10);
+        const options = carousel.getAttribute('data-extra-options')
+          ? safeJSONParse(carousel.getAttribute('data-extra-options'))
+          : {};
 
-        $('.slider').slick({
+
+        Object.assign(options, {
           dots: dots,
           autoplay: autoplay,
-          autoplaySpeed: parseInt(autoplaySpeed, 10),
           infinite: infinite,
           fade: fade,
-          arrows: arrows
+          arrows: arrows,
+          slidesToShow: slidesToShow,
+          slidesToScroll: slidesToScroll,
+        });
+
+
+        $(carousel).not('.slick-initialized').slick({
+          ...options,
         });
       });
     }

modules/edw_paragraphs_carousel/components/slider/slider.twig

@@ -38,6 +38,10 @@
 
 {% set infinite = infinite ? 'true' : 'false' %}
 {% set fade = fade ? 'true' : 'false' %}
+{% set slides_to_show = slides_to_show ? slides_to_show : 1 %}
+{% set slides_to_scroll = slides_to_scroll ? slides_to_scroll : 1 %}
+{% set banner = banner is not defined ? 'false' : (banner ? 'true' : 'false') %}
+{% set extra_options = extra_options is not defined ? '' : extra_options %}
 
 {# Create attributres #}
 {% set slider_attributes = slider_attributes ?: create_attribute() %}
@@ -48,18 +52,27 @@
   'full',
 ]|merge(slider_classes ?: []) %}
 
+{% if slides_to_show == 1 %}
+  {% set slider_classes = slider_classes|merge(['full-width']) %}
+{% endif %}
+
 {# Add extra test #}
 {% set slider_attributes = slider_attributes.setAttribute('data-dots', dots) %}
 {% set slider_attributes = slider_attributes.setAttribute('data-infinite', infinite) %}
 {% set slider_attributes = slider_attributes.setAttribute('data-arrows', arrows) %}
 {% set slider_attributes = slider_attributes.setAttribute('data-fade', fade) %}
 {% set slider_attributes = slider_attributes.setAttribute('data-autoplay', autoplay) %}
 {% set slider_attributes = slider_attributes.setAttribute('data-autoplay-speed', autoplaySpeed) %}
+{% set slider_attributes = slider_attributes.setAttribute('data-slides-to-show', slides_to_show) %}
+{% set slider_attributes = slider_attributes.setAttribute('data-slides-to-scroll', slides_to_scroll) %}
+{% if extra_options %}
+  {% set slider_attributes = slider_attributes.setAttribute('data-extra-options', extra_options) %}
+{% endif %}
+
+{# Render component #}
 
-<div class="grid-container">
-  <div{{ slider_attributes.addClass(slider_classes) }}>
-    {% block slide_slot_main %}
-      {{ content }}
-    {% endblock %}
-  </div>
+<div{{ slider_attributes.addClass(slider_classes) }}>
+  {% block slide_slot_main %}
+    {{ content|without('field_dots', 'field_fade', 'field_autoplay', 'field_slides_to_show', 'field_slides_to_scroll', 'field_infinite', 'field_arrows', 'field_full_width', 'field_extra_options') }}
+  {% endblock %}
 </div>

modules/edw_paragraphs_carousel/config/install/core.entity_form_display.paragraph.edw_carousel.default.yml

@@ -2,39 +2,175 @@ langcode: en
 status: true
 dependencies:
   config:
+    - field.field.paragraph.edw_carousel.field_arrows
+    - field.field.paragraph.edw_carousel.field_autoplay
+    - field.field.paragraph.edw_carousel.field_dots
+    - field.field.paragraph.edw_carousel.field_extra_options
+    - field.field.paragraph.edw_carousel.field_fade
+    - field.field.paragraph.edw_carousel.field_full_width
+    - field.field.paragraph.edw_carousel.field_infinite
+    - field.field.paragraph.edw_carousel.field_paragraphs
+    - field.field.paragraph.edw_carousel.field_slides_to_scroll
+    - field.field.paragraph.edw_carousel.field_slides_to_show
     - paragraphs.paragraphs_type.edw_carousel
   module:
+    - field_group
+    - field_layout
+    - layout_discovery
     - paragraphs
+third_party_settings:
+  field_layout:
+    id: layout_onecol
+    settings:
+      label: ''
+  field_group:
+    group_tabs:
+      children:
+        - group_items
+        - group_settings
+      label: Tabs
+      region: content
+      parent_name: ''
+      weight: 0
+      format_type: tabs
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        direction: horizontal
+        width_breakpoint: 640
+    group_items:
+      children:
+        - field_paragraphs
+      label: Items
+      region: content
+      parent_name: group_tabs
+      weight: 3
+      format_type: tab
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        formatter: open
+        description: ''
+        required_fields: true
+    group_settings:
+      children:
+        - field_full_width
+        - field_dots
+        - field_arrows
+        - field_slides_to_show
+        - field_fade
+        - field_infinite
+        - field_autoplay
+        - field_slides_to_scroll
+        - field_extra_options
+      label: Settings
+      region: content
+      parent_name: group_tabs
+      weight: 4
+      format_type: tab
+      format_settings:
+        classes: ''
+        show_empty_fields: false
+        id: ''
+        label_as_html: false
+        formatter: closed
+        description: ''
+        required_fields: true
+_core:
+  default_config_hash: Kkj8Hn5VPqIurDa1-w12X9nOIXVSpAak0BA6qpIxSzY
 id: paragraph.edw_carousel.default
 targetEntityType: paragraph
 bundle: edw_carousel
 mode: default
 content:
+  field_arrows:
+    type: boolean_checkbox
+    weight: 4
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_autoplay:
+    type: boolean_checkbox
+    weight: 8
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_dots:
+    type: boolean_checkbox
+    weight: 3
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_extra_options:
+    type: string_textarea
+    weight: 10
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_fade:
+    type: boolean_checkbox
+    weight: 6
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
   field_full_width:
     type: boolean_checkbox
-    weight: 0
+    weight: 2
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_infinite:
+    type: boolean_checkbox
+    weight: 7
     region: content
     settings:
       display_label: true
     third_party_settings: {  }
   field_paragraphs:
     type: paragraphs
-    weight: 0
+    weight: 1
     region: content
     settings:
       title: Paragraph
       title_plural: Paragraphs
       edit_mode: closed
       closed_mode: summary
-      autocollapse: none
+      autocollapse: all
       closed_mode_threshold: 0
-      add_mode: dropdown
+      add_mode: button
       form_display_mode: default
       default_paragraph_type: edw_carousel_item
       features:
+        add_above: '0'
         collapse_edit_all: collapse_edit_all
+        convert: '0'
         duplicate: duplicate
     third_party_settings: {  }
+  field_slides_to_scroll:
+    type: number
+    weight: 9
+    region: content
+    settings:
+      placeholder: ''
+    third_party_settings: {  }
+  field_slides_to_show:
+    type: number
+    weight: 5
+    region: content
+    settings:
+      placeholder: ''
+    third_party_settings: {  }
 hidden:
   created: true
   status: true