slick home diap

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1614,20 +1614,23 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home .config_pages--type--diaporama-home {
   position: relative;
 }
-#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom {
+#home .config_pages--type--diaporama-home .diaporama .slick-list {
+  padding: 0 !important;
+}
+#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
   max-height: 1281px;
   overflow: hidden;
 }
-#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom img {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
   width: 100%;
   height: auto;
-  animation: zoomOut 3.5s ease-in infinite;
+  animation: zoomOut 2.5s ease-in infinite;
 }
-#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote {
+#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
   position: relative;
   top: -30px;
 }
-#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote p {
+#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote p {
   font-size: 0.4rem !important;
   font-family: "gilroy-regular";
   padding-top: 0.5rem;
@@ -1637,7 +1640,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     transform: scale(1);
   }
   100% {
-    transform: scale(1.1);
+    transform: scale(1.05);
   }
 }
 #home .content_container #block-quartiers-de-demain-titredepage {

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -288,6 +288,83 @@
 
   // //////////////////// start Timeline script ///////////////////////
 
+  // // document.addEventListener('DOMContentLoaded', function() {
+  // //   let currentSlide = 0;
+  
+  // //   //// responsive ///
+  // //   function getVisibleSlides() {
+  // //     if (window.innerWidth <= 600) {
+  // //       return 1; // Show 1 slide on small screens
+  // //     } else if (window.innerWidth <= 900) {
+  // //       return 4; // Show 4 slides on medium screens
+  // //     } else {
+  // //       return 4; // Show 4 slides on large screens
+  // //     }
+  // //   }
+  
+  // //   function showSlides(index) {
+  // //     const slides = document.querySelectorAll('.__paragraphs');
+  // //     const totalSlides = slides.length;
+  // //     const visibleSlides = getVisibleSlides();
+  // //     const maxSlide = totalSlides - visibleSlides;
+  
+  // //     // Adjust the index to ensure it loops
+  // //     if (index > maxSlide) {
+  // //       currentSlide = 0; // Go back to the first slide
+  // //     } else if (index < 0) {
+  // //       currentSlide = maxSlide; // Go to the last slide
+  // //     } else {
+  // //       currentSlide = index;
+  // //     }
+  
+  // //     // Calculate the offset for the transform
+  // //     const offset = currentSlide * -50 / visibleSlides;
+  // //     const offsetmobile = currentSlide * -10 / visibleSlides;
+  // //     let timeline = document.querySelector('.__timeline-content');
+  // //     if (timeline) {
+  // //       if (window.innerWidth <= 600){
+  // //         timeline.style.transform = `translateX(${offsetmobile}%)`;
+  // //       } else {
+  // //         timeline.style.transform = `translateX(${offset}%)`;
+  // //       }
+  // //     }
+  
+  // //     // Enable/disable arrows based on the current slide
+  // //     // document.getElementById('arrowPrev').disabled = false; // Always enabled now
+  // //     // document.getElementById('arrowNext').disabled = false; // Always enabled now
+  // //     // Attach event listeners
+  // //     let arrowprev = document.getElementById('arrowPrev');
+  // //     if (arrowprev) {
+  // //       arrowprev.disabled = false; // Always enabled now
+  // //     }
+  // //     let arrownext = document.getElementById('arrowNext')
+  // //     if (arrownext) {
+  // //       arrownext.disabled = false; // Always enabled now
+  // //     }
+  // //   }
+  
+  // //   // function prevSlide() {
+  // //   //   showSlides(currentSlide - 1);
+  // //   // }
+  
+  // //   // function nextSlide() {
+  // //   //   showSlides(currentSlide + 1);
+  // //   // }
+  
+  // //   // // Attach event listeners
+  // //   // document.getElementById('arrowPrev').addEventListener('click', prevSlide);
+  // //   // document.getElementById('arrowNext').addEventListener('click', nextSlide);
+  
+  // //   // Attach event listeners
+  // //   let arrowprev = document.getElementById('arrowPrev');
+  // //   if (arrowprev) {
+  // //     arrowprev.addEventListener('click', prevSlide);
+  // //   }
+  // //   let arrownext = document.getElementById('arrowNext')
+  // //   if (arrownext) {
+  // //     arrownext.addEventListener('click', nextSlide);
+  // //   }
+    
 
     // Update month field to only show the first 3 letters
     document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@@ -336,6 +413,20 @@
       }
     });
   
+  //   // Configuration de l'observateur
+  //   const config = { childList: true, subtree: true };
+  
+  //   // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
+  //   observer.observe(document.body, config);
+  
+  // //   // Handle window resize
+  // //   window.addEventListener('resize', function() {
+  // //     showSlides(currentSlide); // Recalculate the slides on resize
+  // //   });
+  
+  // //   // Initialize
+  // //   showSlides(currentSlide);
+  // // });
 
   //   ////////////////////// start  calendrier home   /////////////////////////////////
     $(document).ready(function(){
@@ -353,7 +444,7 @@
         // centerPadding: '100px',
         responsive: [
           {
-            breakpoint: 500,
+            breakpoint: 810,
             settings: {
               slidesToShow: 1,
               adaptiveHeight: false,
@@ -362,8 +453,6 @@
               centerMode: true,
               autoplay: false,
               // autoplaySpeed: 2000,
-              // centerPadding: '100px',
-
             }
           }]
       });
@@ -429,6 +518,79 @@
 
   });
 
+      ////////////////////// start  diaporama home swiper  /////////////////////////////////
+      
+      // PAS DE SWIPER CHARGÉ DANS L'ENV JS ...
+
+      // $(document).ready(function () {
+      //   //initialize swiper when document ready
+      //   let mySwiper = new Swiper ('.swiper-container', {
+          
+      //     speed: 400,
+      //     spaceBetween: 100,
+      //     // Optional parameters
+      //     autoplay: {
+      //       delay: 3000,
+      //       disableOnInteraction: false,
+      //     },
+      //     direction: 'horizontal',
+      //     loop: true,
+      //   })
+      // });
+  
+      ////////////////////// end  diaporama home swiper /////////////////////////////////
+  
+
+  ////////////////////// start  diaporama home swiper  /////////////////////////////////
+
+  // $(document).ready(function () {
+  //   //initialize swiper when document ready
+  //   var mySwiper = new Swiper ('.swiper-container', {
+      
+  //     speed: 400,
+  //     spaceBetween: 100,
+  //     // Optional parameters
+  //     autoplay: {
+  //       delay: 3000,
+  //       disableOnInteraction: false,
+  //     },
+  //     direction: 'horizontal',
+  //     loop: true,
+  //   })
+  // });
+
+  ////////////////////// end  diaporama home swiper /////////////////////////////////
+
+  $(document).ready(function(){
+    let diapohome = $('.config_pages--type--diaporama-home .diaporama');
+    if (diapohome) {
+      diapohome.slick({
+        slidesToShow: 1,
+        dots: false,
+        arrows: false,
+        centerMode: false,  // Désactivé pour éviter les sauts
+        adaptiveHeight: false,  // Désactivé pour éviter les changements de hauteur
+        autoplay: true,
+        autoplaySpeed: 2000,
+        infinite: true,
+        responsive: [
+          {
+            breakpoint: 810,
+            settings: {
+              slidesToShow: 1,
+              adaptiveHeight: false,
+              arrows: true,
+              draggable: true,
+              centerMode: true,  // Désactivé seulement pour les petits écrans
+            }
+          }]
+      });
+      console.log('Diaporama initialisé');
+    }
+});
+
+
+  
 
 })(jQuery, window);
 

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -4,41 +4,39 @@
     .config_pages--type--diaporama-home{
         position: relative;
         
-            .swiper-container{
+        .diaporama{
-                .swiper-wrapper{
+            .slick-list{
-                    .swiper-slide {
+                padding: 0 !important;   
-                        
+                    .cadre-img-zoom{
-                        .cadre-img-zoom{
+                        max-height: 1281px;
-                            max-height: 1281px;
+                        overflow:hidden;
-                            overflow:hidden;
+                        img{
-                            img{
+                            width: 100%;
-                                width: 100%;
+                            height: auto;
-                                height: auto;
+                            animation: zoomOut 2.5s ease-in infinite;
-                                animation: zoomOut 3.5s ease-in infinite;
-                            }
                         }
-                        blockquote{
-                                position: relative;
-                                top: -30px;
-                                p{
-                                    font-size: 0.4rem !important;
-                                    font-family: 'gilroy-regular';
-                                    padding-top: 0.5rem;
-                                }
-                        }
-                        
-                        @keyframes zoomOut {
-                            0% {
-                                transform: scale(1);
-                              }
-                              100% {
-                                transform: scale(1.1);
-                              }
-                        }
-                        
                     }
-                }
+                    blockquote{
+                            position: relative;
+                            top: -30px;
+                            p{
+                                font-size: 0.4rem !important;
+                                font-family: 'gilroy-regular';
+                                padding-top: 0.5rem;
+                            }
+                    }
+                    
+                    @keyframes zoomOut {
+                        0% {
+                            transform: scale(1);
+                            }
+                            100% {
+                            transform: scale(1.05);
+                            }
+                    }
+                        
             }     
+        }
         
     }
     .content_container{

web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig

@@ -65,16 +65,16 @@
     {% endfor %}
   {% endif %}
 {% else %}
-  <div class="swiper-container" {{ attributes }}>
+  <div class="diaporama" {{ attributes }}>
     <div {{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     {% if multiple %}
-      <div class="swiper-wrapper">
+      {# <div class=""> #}
     {% endif %}
     {% for item in items %}
-      <div class="swiper-slide" {{ item.attributes }}>{{ item.content }}</div>
+      <div class="photo" {{ item.attributes }}>{{ item.content }}</div>
     {% endfor %}
     {% if multiple %}
-      </div>
+      {# </div> #}
     {% endif %}
   </div>
 {% endif %}