diff --git a/modules/edw_paragraphs_carousel/components/slider-item/slider-item.css b/modules/edw_paragraphs_carousel/components/slider-item/slider-item.css
index 449a0e0..eb26119 100644
--- a/modules/edw_paragraphs_carousel/components/slider-item/slider-item.css
+++ b/modules/edw_paragraphs_carousel/components/slider-item/slider-item.css
@@ -17,6 +17,9 @@
.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;
@@ -24,11 +27,6 @@
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;
+}
\ No newline at end of file
diff --git a/modules/edw_paragraphs_carousel/components/slider/slider.component.yml b/modules/edw_paragraphs_carousel/components/slider/slider.component.yml
index 28d45ab..8385d59 100644
--- a/modules/edw_paragraphs_carousel/components/slider/slider.component.yml
+++ b/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
-
diff --git a/modules/edw_paragraphs_carousel/components/slider/slider.css b/modules/edw_paragraphs_carousel/components/slider/slider.css
index 4e37c7b..d71b6bc 100644
--- a/modules/edw_paragraphs_carousel/components/slider/slider.css
+++ b/modules/edw_paragraphs_carousel/components/slider/slider.css
@@ -139,3 +139,7 @@
}
}
}
+
+.slider:not(.full-width) .slick-slide {
+ height: 100%;
+}
\ No newline at end of file
diff --git a/modules/edw_paragraphs_carousel/components/slider/slider.js b/modules/edw_paragraphs_carousel/components/slider/slider.js
index a3dfa75..956139b 100644
--- a/modules/edw_paragraphs_carousel/components/slider/slider.js
+++ b/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,
});
});
}
diff --git a/modules/edw_paragraphs_carousel/components/slider/slider.twig b/modules/edw_paragraphs_carousel/components/slider/slider.twig
index 6e5af0a..38cb2fb 100644
--- a/modules/edw_paragraphs_carousel/components/slider/slider.twig
+++ b/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,6 +52,10 @@
'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) %}
@@ -55,11 +63,16 @@
{% 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 #}
-
-
- {% block slide_slot_main %}
- {{ content }}
- {% endblock %}
-