js slick carroussel

This commit is contained in:
2023-06-28 18:36:14 +02:00
parent f0c074426d
commit e7dcefbcae
3 changed files with 28 additions and 209 deletions
@@ -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; }
+26 -1
View File
@@ -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);
+2 -2
View File
@@ -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";