css slick caroussel

web/themes/custom/eql/eql.libraries.yml

@@ -3,8 +3,8 @@ global-css:
     theme:
       css-compiled/styles.css: {}
       #  css-prefixed/styles.css: {}
-      librairies/slick-1.8.1/slick/slick-theme.css: {}
-      librairies/slick-1.8.1/slick/slick.css: {}
+      # librairies/slick-1.8.1/slick/slick-theme.css: {}
+      # librairies/slick-1.8.1/slick/slick.css: {}
 
 
 global-js:

web/themes/custom/eql/scripts/main.js

@@ -169,28 +169,41 @@ jQuery(function($) {
     // if ('.view-id-actus_blocks_pages view-display-id-block_1'){
 
       $('.path-frontpage .view-actus-blocks-pages .view-content').slick({
-        // slidesToShow: 1,
+        slidesToShow: 1,
         // slidesToScroll: 1,
         dots: true,
         arrows: true,
         // centerMode: true,
-        centerPadding: '200px',
-        // responsive: [
-        //   {
-        //     breakpoint: 800,
-        //     settings: {
-        //       centerPadding: '0',
-        //       adaptiveHeight: true
-        //     }
-        //   }]
+        // centerPadding: '100px',
+        responsive: [
+          {
+            breakpoint: 800,
+            settings: {
+              // centerPadding: '0',
+              adaptiveHeight: true
+            }
+          }]
       });
-    // }
+      console.log('salut slick home');
+
+      $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
+        dots: true,
+        arrows: false,
+
+
+      });
+      console.log('salut slick actus');
+
+
+      $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
+        dots: true,
+        arrows: false,
+      });
+      console.log('salut slick projets');
+
   });
 
-  // $('.slidshow-home2').slick(
-  // {slidesToShow: 1,}
-  // );
-  console.log('salut slick');
+  // console.log('salut slick actus');
 
 })(jQuery, window);
 

web/themes/custom/eql/scss/pages/_actualite.scss

@@ -455,6 +455,7 @@
                                     img{
                                         width: 100%;
                                         height: auto;
+                                        margin: auto;
                                     }
                                 }
                                 .field--name-field-mots-clefs{

web/themes/custom/eql/scss/pages/_home.scss

@@ -1,116 +1,142 @@
 // home juin 2023
-@import "../partials/_slick-slider.scss";
+// @import "../partials/_slick-slider.scss";
 
 .path-frontpage{
         // bandeau actus
         .block-views-blockactus-blocks-pages-block-1{
             // grid-area: actus;
             width: 100vw;
+            height: 600px;
             border-bottom: 5px solid $blue-light;
-            // border-top: 5px solid $blue-light;
             background: $background-actus;
-            .view-actus-blocks-pages{
-                padding-top: 5rem;
-                .view-content{
-                    display: flex;
-                    flex-basis: auto;
-                    // display: grid;
-                    // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
-                    // margin: auto;
-                    // padding-top: 2rem;
-                    // padding-bottom: 4rem;
-                    @media (max-width: 479px){ 
-                        display: flex;
-                        flex-direction: column;
-                        // padding-left: 1rem;
-                        width: 80%;
-                    }
-                    .views-row{
-                        flex-basis: auto;
+            div{
+                height: 100%;
+                .view-actus-blocks-pages{
+                    height: 100%;
+                    .view-content{
+                        // display: flex;
+                        // flex-basis: auto;
+                        height: 90%;
 
-                    }
-                    // .w3-button{
-    
-                    // }
-                    // .views-row:nth-of-type(1) { grid-column: 2; }
-                   
-                   
-                    .node-type-actualite{
-                        color: $black;
-                        line-height: 1.5rem;
-                        padding: 0.5rem;
-                        div:first-child{           // block actu dans le bandeau
+                        @media (max-width: 479px){ 
                             display: flex;
                             flex-direction: column;
-                            // :nth-child(1) { order: 1; } 
-                            // :nth-child(4) { order: 2; }  
-                            // :nth-child(5) { order: 3; }            
+                            width: 80%;
                         }
-                        .field--name-field-images {
-                            order: 1;
-                            .field__item img{  
-                                max-width: 95%; 
-                                max-height: 150px;
-                                object-fit: cover;
-                                width: 100%; 
-                                padding-bottom: 1rem;
-                            }
-                        }
-                        
-                        .field--name-field-date{
-                            order: 2;
-                            display: flex;
-                            flex-direction: row;
-                            justify-content: flex-start;
-                            &:not(:last-child):after{ 
-                                padding-right: 1rem;
-                                content: "|";
-                            }
-                            time{ 
-                                font-size: 0.9rem;
-                                font-weight: 800;
-                                padding-right: 1rem;
-                                width: fit-content;
-                                // :not(:last-child):after{ 
-                                //     padding-left: 0.5rem;
-                                //     content: "|";
-                                // }
-                                
+                        .views-row{
+                            // width: 80%;
+                            // margin: auto;
+                            .node-type-actualite{
+                                color: $black;
+                                line-height: 1.5rem;
+                                width: 80%;
+                                height: 600px;
+                                margin: auto;
     
-                            }
-                        }
-                        .field--name-title{
-                            order:3;
-                        }
-                        .field--name-field-sous-titre{
-                            order:4;
-                            margin-top: 0.3rem;
-                            font-weight: 800;
-                        }
+                                // background-color: burlywood;
+        
+                                div:first-child{           // block actu dans le bandeau
+                                    // display: flex;
+                                    // flex-direction: column;
+                                    // flex-wrap: wrap;
+                                    display: grid;
+                                    grid-template-columns: 1fr repeat(8, 1fr) 1fr;
+                                    .field--name-field-images {
+                                        order: 1;
+                                        grid-column: 1 /span 5;
+                                        grid-row: 1 / span 6;
+                                        .field__item img{  
+                                            max-height: 450px;
+                                            object-fit: contain;
+                                            // padding-bottom: 1rem;
+                                            max-width: 700px;
+                            
+                                        }
+                                    }
+                                    
+                                    .field--name-field-date{
+                                        display: inline;
+
+                                        grid-column: 9 / span 7;
+                                        grid-row: 2;
+                                        order: 2;
+                                        // display: flex;
+                                        flex-direction: row;
+                                        // justify-content: flex-start;
+                                        // &:not(:last-child):after{ 
+                                        //     padding-right: 1rem;
+                                        //     content: "|";
+                                        // }
+                                        time{ 
+                                            font-size: 0.9rem;
+                                            font-weight: 800;
+                                            padding-right: 1rem;
+                                            width: fit-content;
+                                            // :not(:last-child):after{ 
+                                            //     padding-left: 0.5rem;
+                                            //     content: "|";
+                                            // }            
+                                        }
+                                    }
+    
+                                    .field--name-field-lieu{
+                                        .field__label{
+                                            display: none;
+                                        }
+                                        grid-column: 9 / span 9;
+                                        grid-row: 2;
+                                    }
+                                    .field--name-title{
+                                        display: inline-flex;
+                                        grid-column: 9 / span 9;
+                                        grid-row: 3;
+                                        order:3;
+                                    }
+                                    .field--name-field-sous-titre{
+                                        display: inline-block;
+                                        grid-column: 9 / span 9;
+                                        grid-row: 4;
+                                        order:4;
+                                        margin-top: 0.3rem;
+                                        font-weight: 800;
+                                    }
+                                    
+                                    .field:not(.field--name-field-images){
+                                        width: 100%;
+                                    }
+                                    h2{ margin:0; }
+                                    a{ color: $black; } 
                         
-                        .field:not(.field--name-field-images){
-                            width: 100%;
-                        }
-                        h2{ margin:0; }
-                        a{ color: $black; } 
-            
-                        .inline.links{
-                            padding-top: none !important;
-                            list-style: none;
-                            width: fit-content;
-                            align-self: flex-end;
-                            padding-right: 1rem;
-                            a{
-                                display: none;
+                                    .inline.links{
+                                        // grid-column: 5;
+                                        // grid-row: 4;
+                                        padding-top: none !important;
+                                        list-style: none;
+                                        width: fit-content;
+                                        align-self: flex-end;
+                                        padding-right: 1rem;
+                                        a{
+                                            display: none;
+                                        }
+                                    }
+                                    .field--name-field-actu-type{
+                                        display: inline-block;
+    
+                                        grid-column: 9 / span 7;
+                                        grid-row: 5;
+                                        order:5;
+                                        padding-top: 1rem;
+                                    }
+                                }
+
                             }
                         }
-                        .field--name-field-actu-type{
-                            order:5;
-                            padding-top: 1rem;
-                        }
+                       
+
                     }
                 }
             }
+
         }
     
         // bouton voir toutes actus du bandeau bleu
@@ -381,4 +407,14 @@
 
             }
         }
-}
+
+        //carte
+
+        .block-views-blockprojets-block-2{
+            #leaflet-map-view-projets-block-2{
+                height: 500px !important;
+            }
+        }
+
+        
+    }

web/themes/custom/eql/scss/pages/_projet.scss

@@ -6,39 +6,12 @@
         .region-content{
             #block-contenudelapageprincipale{
                 .layout--threecol-25-50-25{
-                    // display: grid;
-                    // grid-template-rows: repeat(6, auto);
-                
                     .layout__region--top{
                         
                         .block-region-top{
-                            // position: relative;
                             padding-top: 2rem;
                             display: grid;
                             grid-template-columns: 1fr repeat(8, 1fr) 1fr;
-                            // @media (max-width: 479px) {
-                            //     display: flex;
-                            //     flex-direction: column;                                
-                            // }
-
-                            // .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{
-                            //     grid-column: 1 / span 10;
-                            //     background-color: $blue-light;
-                                
-                            //     .field--name-body{
-                            //         vertical-align: middle;
-                            //         color: $white;
-                            //         font-family: 'Source Code Pro';
-                            //         font-size: 2rem;
-                            //         font-weight: 800;
-                            //         text-transform: uppercase;
-                            //         margin-left: 10%;
-                            //         a{
-                            //             color:$white;
-                            //         }
-                            //     }
-                            // }
-            
 
                             .block-entity-fieldnodetitle{
 

web/themes/custom/eql/scss/partials/_slick.scss

@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

web/themes/custom/eql/scss/partials/_slick_custom.scss

@@ -0,0 +1,5 @@
+.slick-prev {
+    color: $blue-light;
+    left: 25px;
+}
+

web/themes/custom/eql/scss/styles.scss

@@ -58,7 +58,7 @@
 /*partials*/
 @import "partials/_header";
 @import "partials/_footer";
-@import "partials/_slick_carousel_custom";
-// @import "partials/_slick-slider.scss";
-// @import "partials/_slick-theme.scss";
+// @import "partials/_slick_custom.scss";
+@import "partials/_slick";
+@import "partials/_slick-theme";
 // @import "partials/_nodetyperessource.scss";