Adding swiper.

web/modules/custom/dc_components/components/ping-pong/ping-pong.component.yml

@@ -30,6 +30,13 @@ slots:
     description: The media item(s).
 
 libraryOverrides:
+  css:
+    theme:
+      ../../libraries/swiper-bundle.min.css: { minified: true }
+      ping-pong.css: { }
+  js:
+    ../../libraries/swiper-bundle.min.js: { minified: true }
+    ping-pong.js: { }
   dependencies:
     - core/drupal
     - core/once

web/modules/custom/dc_components/components/ping-pong/ping-pong.css

@@ -1,3 +1,8 @@
+.swiper {
+  width: 600px;
+  height: 300px;
+}
+
 .ping-pong-wrapper {
   max-height: 600px;
   display: flex;
@@ -60,36 +65,36 @@
 }
 
 /** slider styles */
-.ping-pong .slide img {
+.ping-pong .swiper-slide img {
   width: 100%;
   object-fit: cover;
   display: block;
   height: 400px;
 }
 
-.ping-pong .slide.active img {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-  transition: all .5s ease-in-out;
-}
+/*.ping-pong .slide.active img { */
+/*  display: block; */
+/*  opacity: 1; */
+/*  visibility: visible; */
+/*  transition: all .5s ease-in-out; */
+/*} */
 
-.ping-pong .slide.hide img {
-  opacity: 0;
-  visibility: hidden;
-  transition: all .5s ease-in-out;
-}
+/*.ping-pong .slide.hide img { */
+/*  opacity: 0; */
+/*  visibility: hidden; */
+/*  transition: all .5s ease-in-out; */
+/*} */
 
-.ping-pong .slide img {
-  display: none;
-  visibility: hidden;
-  opacity: 0;
-  transition: all .5s ease-in-out;
-}
+/*.ping-pong .slide img { */
+/*  display: none; */
+/*  visibility: hidden; */
+/*  opacity: 0; */
+/*  transition: all .5s ease-in-out; */
+/*} */
 
-.ping-pong ul.slides {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  max-height: 100%;
-}
+/*.ping-pong ul.slides { */
+/*  list-style-type: none; */
+/*  padding: 0; */
+/*  margin: 0; */
+/*  max-height: 100%; */
+/*} */

web/modules/custom/dc_components/components/ping-pong/ping-pong.js

@@ -2,35 +2,58 @@
   Drupal.behaviors.pingPongSlider = {
 
     attach: function (context, settings) {
-      let sliders = once('pingPongSlider', '.slider', context);
+      let sliders = once('pingPongSlider', '.swiper', context);
       sliders.forEach((slider) =>  {
-        // get the slides
-        let slides = slider.querySelectorAll('.slide');
-        slides[0].classList.add("active");
-        if (slides.length <= 1) {
-          return;
-        }
-        changeSlide(slider);
+        const swiper = new Swiper(slider, {
+          // Optional parameters
+          loop: true,
+          autoplay: {
+           delay: 5000,
+          },
+
+          // If we need pagination
+          pagination: {
+            el: '.swiper-pagination',
+          },
+
+          // Navigation arrows
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
+
+          // And if we need scrollbar
+          scrollbar: {
+            el: '.swiper-scrollbar',
+          },
+        });
+        // // get the slides
+        // let slides = slider.querySelectorAll('.slide');
+        // slides[0].classList.add("active");
+        // if (slides.length <= 1) {
+        //   return;
+        // }
+        // changeSlide(slider);
       });
 
-      function changeSlide(sliderDiv, loop = 1) {
-        setTimeout(() => {
-          let slideCount = sliderDiv.querySelectorAll('.slide').length;
-          let activeSlide = sliderDiv.querySelector('.slide.active');
-          let nextSlide = activeSlide.nextElementSibling;
-          if (loop == slideCount) {
-            nextSlide = sliderDiv.querySelectorAll('.slide')[0];
-            return;
-            // get the first slide
-          }
-          else {
-            loop++;
-            activeSlide.classList.toggle('active');
-            nextSlide.classList.toggle('active');
-            changeSlide(sliderDiv, loop);
-          }
-        }, 10000);
-      }
+      // function changeSlide(sliderDiv, loop = 1) {
+      //   setTimeout(() => {
+      //     let slideCount = sliderDiv.querySelectorAll('.slide').length;
+      //     let activeSlide = sliderDiv.querySelector('.slide.active');
+      //     let nextSlide = activeSlide.nextElementSibling;
+      //     if (loop == slideCount) {
+      //       nextSlide = sliderDiv.querySelectorAll('.slide')[0];
+      //       return;
+      //       // get the first slide
+      //     }
+      //     else {
+      //       loop++;
+      //       activeSlide.classList.toggle('active');
+      //       nextSlide.classList.toggle('active');
+      //       changeSlide(sliderDiv, loop);
+      //     }
+      //   }, 10000);
+      // }
     }
 
   };

web/modules/custom/dc_components/components/ping-pong/ping-pong.twig

@@ -17,9 +17,9 @@
   'ping-pong',
   mediaAlign|clean_class
 ] %}
+{{ title_prefix }}
+{{ title_suffix }}
 <div {{ attributes.addClass(classes) }} style="background-color: {{ bgColor }}">
-  {{ title_prefix }}
-  {{ title_suffix }}
   <div class="ping-pong__media">
     {% block media %}{% endblock %}
   </div>