bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slick calendrier

This commit is contained in:
ouidade 2024-09-25 18:00:17 +02:00
parent 85489abd5f
commit e7cc310ed2
5 changed files with 68 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

11
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1231,6 +1231,13 @@ footer {
white-space: normal;
color: black;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list {
padding: 0 !important;
width: 100%;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list .slick-track {
width: 100% !important;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
padding-left: 0rem;
@ -1240,7 +1247,7 @@ footer {
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: fit-content;
width: fit-content !important;
display: flex;
flex-direction: column;
margin: auto;
@ -1553,7 +1560,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home #background-animated {
position: absolute;
top: 2000px;
left: 300px;
left: 350px;
width: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 2; /* S'assure que l'élément soit au-dessus */

57
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -327,21 +327,21 @@
}
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = false; // Always enabled now
document.getElementById('arrowNext').disabled = false; // Always enabled now
// document.getElementById('arrowPrev').disabled = false; // Always enabled now
// document.getElementById('arrowNext').disabled = false; // Always enabled now
}
function prevSlide() {
showSlides(currentSlide - 1);
}
// function prevSlide() {
// showSlides(currentSlide - 1);
// }
function nextSlide() {
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
// document.getElementById('arrowPrev').addEventListener('click', prevSlide);
// document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@ -476,6 +476,41 @@
////////////////////// end diaporama home swiper /////////////////////////////////
////////////////////// start calendrier home swiper /////////////////////////////////
$(document).ready(function(){
$('.paragraph--type--phase-deroulement').slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: true,
adaptiveHeight: true,
autoplay: false,
draggable: true,
// autoplaySpeed: 1500,
// infinite: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true,
autoplay: false,
// autoplaySpeed: 2000,
}
}]
});
console.log('salut slick home');
});
////////////////////// end diaporama home swiper /////////////////////////////////
})(jQuery, window);

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@ -4,7 +4,7 @@
// display: none;
position: absolute;
top: 2000px;
left: 300px;
left: 350px;
width: 100%;
// height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */

12
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -114,6 +114,16 @@
font-size: 1rem;
white-space: normal;
color: black;
.slick-list{
padding: 0 !important;
width: 100%;
.slick-track{
width: 100% !important;
// .slick-slide&.date{
// width: fit-content !important;
// }
}
}
// padding-bottom: 1rem;
// padding-left: 2rem;
@ -125,7 +135,7 @@
height: 200px;
}
.date{
width: fit-content;
width: fit-content !important;
display: flex;
flex-direction: column;
margin: auto;