slick-carrousel

web/themes/custom/eql/css-compiled/styles.css

@@ -1,5 +1,211 @@
 @charset "UTF-8";
 /*eql*/
+/*setup*/
+/* 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; }
+  .slick-list:focus {
+    outline: none; }
+  .slick-list.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; }
+  .slick-track:before, .slick-track:after {
+    content: "";
+    display: table; }
+  .slick-track:after {
+    clear: both; }
+  .slick-loading .slick-track {
+    visibility: hidden; }
+
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none; }
+  [dir="rtl"] .slick-slide {
+    float: right; }
+  .slick-slide img {
+    display: block; }
+  .slick-slide.slick-loading img {
+    display: none; }
+  .slick-slide.dragging img {
+    pointer-events: none; }
+  .slick-initialized .slick-slide {
+    display: block; }
+  .slick-loading .slick-slide {
+    visibility: hidden; }
+  .slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent; }
+
+.slick-arrow.slick-hidden {
+  display: none; }
+
+/* Slider */
+.slick-loading .slick-list {
+  background: #fff url("./ajax-loader.gif") center center no-repeat; }
+
+/* Icons */
+@font-face {
+  font-family: "slick";
+  src: url("./fonts/slick.eot");
+  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0px;
+  font-size: 0px;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding: 0;
+  border: none;
+  outline: none; }
+  .slick-prev:hover, .slick-prev:focus,
+  .slick-next:hover,
+  .slick-next:focus {
+    outline: none;
+    background: transparent;
+    color: transparent; }
+    .slick-prev:hover:before, .slick-prev:focus:before,
+    .slick-next:hover:before,
+    .slick-next:focus:before {
+      opacity: 1; }
+  .slick-prev.slick-disabled:before,
+  .slick-next.slick-disabled:before {
+    opacity: 0.25; }
+  .slick-prev:before,
+  .slick-next:before {
+    font-family: "slick";
+    font-size: 20px;
+    line-height: 1;
+    color: white;
+    opacity: 0.75;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+
+.slick-prev {
+  left: -25px; }
+  [dir="rtl"] .slick-prev {
+    left: auto;
+    right: -25px; }
+  .slick-prev:before {
+    content: "←"; }
+    [dir="rtl"] .slick-prev:before {
+      content: "→"; }
+
+.slick-next {
+  right: -25px; }
+  [dir="rtl"] .slick-next {
+    left: -25px;
+    right: auto; }
+  .slick-next:before {
+    content: "→"; }
+    [dir="rtl"] .slick-next:before {
+      content: "←"; }
+
+/* Dots */
+.slick-dotted.slick-slider {
+  margin-bottom: 30px; }
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+  list-style: none;
+  display: block;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  width: 100%; }
+  .slick-dots li {
+    position: relative;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    margin: 0 5px;
+    padding: 0;
+    cursor: pointer; }
+    .slick-dots li button {
+      border: 0;
+      background: transparent;
+      display: block;
+      height: 20px;
+      width: 20px;
+      outline: none;
+      line-height: 0px;
+      font-size: 0px;
+      color: transparent;
+      padding: 5px;
+      cursor: pointer; }
+      .slick-dots li button:hover, .slick-dots li button:focus {
+        outline: none; }
+        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
+          opacity: 1; }
+      .slick-dots li button:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        content: "•";
+        width: 20px;
+        height: 20px;
+        font-family: "slick";
+        font-size: 6px;
+        line-height: 20px;
+        text-align: center;
+        color: black;
+        opacity: 0.25;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale; }
+    .slick-dots li.slick-active button:before {
+      color: black;
+      opacity: 0.75; }
+
 /*global*/
 @font-face {
   font-family: 'Font Awesome';

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

@@ -6,6 +6,8 @@ global-css:
 global-js:
   js:
     scripts/main.js: {}
+    scripts/slick.js: {}
+ 
   dependencies:
     - core/jquery
     

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

@@ -1,3 +1,4 @@
+
 console.log('salut');
 // menu burger open
 
@@ -159,22 +160,71 @@ jQuery(function($) {
 
 
 //  slideshow home // work but does the same for all node-type-actualite, faut limiter à ceux dans la path-frontpage
-var slideIndex = 1;
-showDivs(slideIndex);
+// var slideIndex = 1;
+// showDivs(slideIndex);
 
-function plusDivs(n) {
-  showDivs(slideIndex += n);
-}
+// function plusDivs(n) {
+//   showDivs(slideIndex += n);
+// }
 
-function showDivs(n) {
-  var i;
-  var x = document.getElementsByPath("node-type-actualite");
-  if (n > x.length) {slideIndex = 1}
-  if (n < 1) {slideIndex = x.length} ;
-  for (i = 0; i < x.length; i++) {
-    x[i].style.display = "none";
-  }
-  x[slideIndex-1].style.display = "block";
-}
+// function showDivs(n) {
+//   var i;
+//   var x = document.getElementsByPath("node-type-actualite");
+//   if (n > x.length) {slideIndex = 1}
+//   if (n < 1) {slideIndex = x.length} ;
+//   for (i = 0; i < x.length; i++) {
+//     x[i].style.display = "none";
+//   }
+//   x[slideIndex-1].style.display = "block";
+// }
 
 /////////////////////////////////////////////////
+
+////////////////////////////////////////////////
+
+
+(function($, window) {
+  
+    // 'slick-carousel';
+    var mobile = false;
+  
+    $(function(){
+      console.log("$ ready !!");
+  
+      
+      // if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){
+      //   mobile = true;
+      // }
+    
+      if($(".path-frontpage").length > 0){
+        console.log(".path-frontpage");
+        // $("#"+).fadeIn();
+
+        $(".node-type-actualite").slick({
+          slidesToShow: 1,
+          slidesToScroll: 4,
+          centerMode: true,
+          centerPadding: '300px',
+          // appendDots: $(element),
+          dots: true,
+          // appendArrows: $(element),
+          arrows: true,
+          // prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
+          // nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
+          responsive: [
+          {
+            breakpoint: 800,
+            settings: {
+              centerPadding: '0',
+            }
+          }]
+
+        });
+        console.log(".node-type-actualite");
+
+
+      }
+      
+  });
+  })(jQuery, window);
+  

web/themes/custom/eql/scss/global/_slick-slider.scss

@@ -0,0 +1,101 @@
+/* Slider */
+
+.slick-slider {
+    background-color: blue;
+    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/styles.scss

@@ -1,5 +1,9 @@
 /*eql*/
 
+/*setup*/
+@import "../node_modules/slick-carousel/slick/slick.scss";
+@import "../node_modules/slick-carousel/slick/slick-theme.scss";
+
 
 /*global*/
 
@@ -10,6 +14,8 @@
 // @import "global/_reset";
 @import "global/_typography";
 @import "global/_mediaqueries";
+// @import "global/_slick-slider";
+
 
 
 /*pages*/
@@ -17,6 +23,7 @@
 @import "pages/partials/header_footer";
 @import "pages/home";*/
 
+
 // @import "pages/off_canvas_page_wrapper";
 @import "pages/_static";
 @import "pages/_home";

web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig

@@ -78,12 +78,10 @@
     'mySlides',
   ]
 %}
-      {# <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button> #}
 
 <article{{ attributes.addClass(classes, 'field__items') }}>
 
   {{ title_prefix }}
-  <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
   {% if label and not page %}
     <h2{{ title_attributes }}>
       <a href="{{ url }}" rel="bookmark">{{ label }}</a>
@@ -106,4 +104,3 @@
   </div>
 
 </article>
-      {# <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button> #}

web/themes/custom/eql/templates/views-view.html.twig

@@ -62,15 +62,9 @@
   {% endif %}
 
   {% if rows %}
+
     <div class="view-content">
-      {# {% if class="path-frontpage"%} #}
-      {# <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button> #}
       {{ rows }}
-      {# <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button> #}
-     
-     {# {% else %} #}
-      {# {{ rows }} #}
-      {# {% endif %} #}
 
     </div>
   {% elseif empty %}