From e7dcefbcaecc6f45493b8bc9bab6ec4f55a21650 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 28 Jun 2023 18:36:14 +0200 Subject: [PATCH] js slick carroussel --- web/themes/custom/eql/css-compiled/styles.css | 206 ------------------ web/themes/custom/eql/scripts/main.js | 27 ++- web/themes/custom/eql/scss/styles.scss | 4 +- 3 files changed, 28 insertions(+), 209 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 902c56d..fdf7321 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -4104,209 +4104,3 @@ a { #fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content .node-type-partenaires_logo_footer_ { padding-right: 1rem; padding-bottom: 1rem; } - -/* Slider */ -.slick-slider { - padding-top: 6rem; - 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; } diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 5d424ee..8a8e528 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -162,8 +162,33 @@ jQuery(function($) { // slideshow home // marche pas. attention ai rajouter des class dans template views.view.html.twig et views-view-actus-blocks-pages--block-1.html.twig (function($, window) { + console.log('hello') - $('.slidshow-home2').slick({slidesToShow: 1,}); + + $(document).ready(function(){ + if ('.view-id-actus_blocks_pages view-display-id-block_1'){ + $('.slidshow-home2').slick({ + slidesToShow: 1, + slidesToScroll: 1, + dots: true, + arrows: true, + centerMode: true, + centerPadding: '200px', + responsive: [ + { + breakpoint: 800, + settings: { + centerPadding: '0', + adaptiveHeight: true + } + }] + }); + } + }); + + // $('.slidshow-home2').slick( + // {slidesToShow: 1,} + // ); console.log('salut slick'); })(jQuery, window); diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss index 2c2520a..be127f6 100644 --- a/web/themes/custom/eql/scss/styles.scss +++ b/web/themes/custom/eql/scss/styles.scss @@ -58,6 +58,6 @@ /*partials*/ @import "partials/_header"; @import "partials/_footer"; -@import "partials/_slick-slider.scss"; -@import "partials/_slick-theme.scss"; +// @import "partials/_slick-slider.scss"; +// @import "partials/_slick-theme.scss"; // @import "partials/_nodetyperessource.scss";