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

slick home diap

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-09-26 16:16:58 +02:00
parent 4b0d27fb10
commit a93e133c5b
5 changed files with 211 additions and 48 deletions
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

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

@@ -1614,20 +1614,23 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .config_pages--type--diaporama-home {
position: relative;
}
#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom {
#home .config_pages--type--diaporama-home .diaporama .slick-list {
padding: 0 !important;
}
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
max-height: 1281px;
overflow: hidden;
}
#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide .cadre-img-zoom img {
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
width: 100%;
height: auto;
animation: zoomOut 3.5s ease-in infinite;
animation: zoomOut 2.5s ease-in infinite;
}
#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote {
#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
position: relative;
top: -30px;
}
#home .config_pages--type--diaporama-home .swiper-container .swiper-wrapper .swiper-slide blockquote p {
#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote p {
font-size: 0.4rem !important;
font-family: "gilroy-regular";
padding-top: 0.5rem;
@@ -1637,7 +1640,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
transform: scale(1);
}
100% {
transform: scale(1.1);
transform: scale(1.05);
}
}
#home .content_container #block-quartiers-de-demain-titredepage {

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

@@ -288,6 +288,83 @@
// //////////////////// start Timeline script ///////////////////////
// // document.addEventListener('DOMContentLoaded', function() {
// // let currentSlide = 0;
// // //// responsive ///
// // function getVisibleSlides() {
// // if (window.innerWidth <= 600) {
// // return 1; // Show 1 slide on small screens
// // } else if (window.innerWidth <= 900) {
// // return 4; // Show 4 slides on medium screens
// // } else {
// // return 4; // Show 4 slides on large screens
// // }
// // }
// // function showSlides(index) {
// // const slides = document.querySelectorAll('.__paragraphs');
// // const totalSlides = slides.length;
// // const visibleSlides = getVisibleSlides();
// // const maxSlide = totalSlides - visibleSlides;
// // // Adjust the index to ensure it loops
// // if (index > maxSlide) {
// // currentSlide = 0; // Go back to the first slide
// // } else if (index < 0) {
// // currentSlide = maxSlide; // Go to the last slide
// // } else {
// // currentSlide = index;
// // }
// // // Calculate the offset for the transform
// // const offset = currentSlide * -50 / visibleSlides;
// // const offsetmobile = currentSlide * -10 / visibleSlides;
// // let timeline = document.querySelector('.__timeline-content');
// // if (timeline) {
// // if (window.innerWidth <= 600){
// // timeline.style.transform = `translateX(${offsetmobile}%)`;
// // } else {
// // timeline.style.transform = `translateX(${offset}%)`;
// // }
// // }
// // // Enable/disable arrows based on the current slide
// // // document.getElementById('arrowPrev').disabled = false; // Always enabled now
// // // document.getElementById('arrowNext').disabled = false; // Always enabled now
// // // Attach event listeners
// // let arrowprev = document.getElementById('arrowPrev');
// // if (arrowprev) {
// // arrowprev.disabled = false; // Always enabled now
// // }
// // let arrownext = document.getElementById('arrowNext')
// // if (arrownext) {
// // arrownext.disabled = false; // Always enabled now
// // }
// // }
// // // function prevSlide() {
// // // 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
// // let arrowprev = document.getElementById('arrowPrev');
// // if (arrowprev) {
// // arrowprev.addEventListener('click', prevSlide);
// // }
// // let arrownext = document.getElementById('arrowNext')
// // if (arrownext) {
// // arrownext.addEventListener('click', nextSlide);
// // }
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@@ -335,7 +412,21 @@
}
}
});
// // Configuration de l'observateur
// const config = { childList: true, subtree: true };
// // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
// observer.observe(document.body, config);
// // // Handle window resize
// // window.addEventListener('resize', function() {
// // showSlides(currentSlide); // Recalculate the slides on resize
// // });
// // // Initialize
// // showSlides(currentSlide);
// // });
// ////////////////////// start calendrier home /////////////////////////////////
$(document).ready(function(){
@@ -353,7 +444,7 @@
// centerPadding: '100px',
responsive: [
{
breakpoint: 500,
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
@@ -362,8 +453,6 @@
centerMode: true,
autoplay: false,
// autoplaySpeed: 2000,
// centerPadding: '100px',
}
}]
});
@@ -428,6 +517,79 @@
}
});
////////////////////// start diaporama home swiper /////////////////////////////////
// PAS DE SWIPER CHARGÉ DANS L'ENV JS ...
// $(document).ready(function () {
// //initialize swiper when document ready
// let mySwiper = new Swiper ('.swiper-container', {
// speed: 400,
// spaceBetween: 100,
// // Optional parameters
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// direction: 'horizontal',
// loop: true,
// })
// });
////////////////////// end diaporama home swiper /////////////////////////////////
////////////////////// start diaporama home swiper /////////////////////////////////
// $(document).ready(function () {
// //initialize swiper when document ready
// var mySwiper = new Swiper ('.swiper-container', {
// speed: 400,
// spaceBetween: 100,
// // Optional parameters
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// direction: 'horizontal',
// loop: true,
// })
// });
////////////////////// end diaporama home swiper /////////////////////////////////
$(document).ready(function(){
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome) {
diapohome.slick({
slidesToShow: 1,
dots: false,
arrows: false,
centerMode: false, // Désactivé pour éviter les sauts
adaptiveHeight: false, // Désactivé pour éviter les changements de hauteur
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true, // Désactivé seulement pour les petits écrans
}
}]
});
console.log('Diaporama initialisé');
}
});
})(jQuery, window);

64
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -4,41 +4,39 @@
.config_pages--type--diaporama-home{
position: relative;
.swiper-container{
.swiper-wrapper{
.swiper-slide {
.cadre-img-zoom{
max-height: 1281px;
overflow:hidden;
img{
width: 100%;
height: auto;
animation: zoomOut 3.5s ease-in infinite;
}
.diaporama{
.slick-list{
padding: 0 !important;
.cadre-img-zoom{
max-height: 1281px;
overflow:hidden;
img{
width: 100%;
height: auto;
animation: zoomOut 2.5s ease-in infinite;
}
blockquote{
position: relative;
top: -30px;
p{
font-size: 0.4rem !important;
font-family: 'gilroy-regular';
padding-top: 0.5rem;
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
}
}
}
blockquote{
position: relative;
top: -30px;
p{
font-size: 0.4rem !important;
font-family: 'gilroy-regular';
padding-top: 0.5rem;
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
}
}
}
.content_container{

8
web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig
View File

@@ -65,16 +65,16 @@
{% endfor %}
{% endif %}
{% else %}
<div class="swiper-container" {{ attributes }}>
<div class="diaporama" {{ attributes }}>
<div {{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="swiper-wrapper">
{# <div class=""> #}
{% endif %}
{% for item in items %}
<div class="swiper-slide" {{ item.attributes }}>{{ item.content }}</div>
<div class="photo" {{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{# </div> #}
{% endif %}
</div>
{% endif %}