Merge pull request #59 from eaudeweb/29044-homepage-carousel

refs#29044 add autoplay and autoplay speed options for carousel

Author: iuga-paula

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

@@ -26,6 +26,16 @@ props:
       title: Slider fade effect
       description: Slider fade effect, default -> false.
       default: false
+    autoplay:
+      type: boolean
+      title: Autoplay
+      description: Enables Autoplay
+      default: false
+    autoplaySpeed:
+      type: integer
+      title: Autoplay speed
+      description: Autoplay speed in ms.
+      default: true
 
     slider_classes:
       type: array
@@ -47,5 +57,5 @@ slots:
 libraryOverrides:
   dependencies:
     - edw_paragraphs_carousel/carousel
-    - drupal/once
+    - core/once
 

modules/edw_paragraphs/modules/edw_paragraphs_carousel/components/slider/slider.js

@@ -11,12 +11,16 @@
         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'));
 
         $('.slider').slick({
           dots: dots,
+          autoplay: autoplay,
+          autoplaySpeed: parseInt(autoplaySpeed, 10),
           infinite: infinite,
           fade: fade,
-          arrows: arrows,
+          arrows: arrows
         });
       });
     }

modules/edw_paragraphs/modules/edw_paragraphs_carousel/components/slider/slider.twig

@@ -20,6 +20,16 @@
   {% set dots = dots ? 'true' : 'false' %}
 {% endif %}
 
+{% if autoplay is not defined %}
+  {% set autoplay = 'false' %}
+{% else %}
+  {% set autoplay = autoplay ? 'true' : 'false' %}
+{% endif %}
+
+{% if autoplaySpeed is not defined %}
+  {% set autoplaySpeed = 2000 %}
+{% endif %}
+
 {% if arrows is not defined %}
   {% set arrows = 'true' %}
 {% else %}
@@ -43,6 +53,8 @@
 {% 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) %}
 
 <div class="grid-container">
   <div{{ slider_attributes.addClass(slider_classes) }}>