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

slick home diap

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

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 { #home .config_pages--type--diaporama-home {
position: relative; 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; max-height: 1281px;
overflow: hidden; 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%; width: 100%;
height: auto; 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; position: relative;
top: -30px; 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-size: 0.4rem !important;
font-family: "gilroy-regular"; font-family: "gilroy-regular";
padding-top: 0.5rem; padding-top: 0.5rem;
@ -1637,7 +1640,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
transform: scale(1); transform: scale(1);
} }
100% { 100% {
transform: scale(1.1); transform: scale(1.05);
} }
} }
#home .content_container #block-quartiers-de-demain-titredepage { #home .content_container #block-quartiers-de-demain-titredepage {

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

@ -288,6 +288,83 @@
// //////////////////// start Timeline script /////////////////////// // //////////////////// 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 // Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@ -336,6 +413,20 @@
} }
}); });
// // 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 ///////////////////////////////// // ////////////////////// start calendrier home /////////////////////////////////
$(document).ready(function(){ $(document).ready(function(){
@ -353,7 +444,7 @@
// centerPadding: '100px', // centerPadding: '100px',
responsive: [ responsive: [
{ {
breakpoint: 500, breakpoint: 810,
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
adaptiveHeight: false, adaptiveHeight: false,
@ -362,8 +453,6 @@
centerMode: true, centerMode: true,
autoplay: false, autoplay: false,
// autoplaySpeed: 2000, // autoplaySpeed: 2000,
// centerPadding: '100px',
} }
}] }]
}); });
@ -429,6 +518,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); })(jQuery, window);

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

@ -4,17 +4,16 @@
.config_pages--type--diaporama-home{ .config_pages--type--diaporama-home{
position: relative; position: relative;
.swiper-container{ .diaporama{
.swiper-wrapper{ .slick-list{
.swiper-slide { padding: 0 !important;
.cadre-img-zoom{ .cadre-img-zoom{
max-height: 1281px; max-height: 1281px;
overflow:hidden; overflow:hidden;
img{ img{
width: 100%; width: 100%;
height: auto; height: auto;
animation: zoomOut 3.5s ease-in infinite; animation: zoomOut 2.5s ease-in infinite;
} }
} }
blockquote{ blockquote{
@ -32,13 +31,12 @@
transform: scale(1); transform: scale(1);
} }
100% { 100% {
transform: scale(1.1); transform: scale(1.05);
} }
} }
} }
} }
}
} }
.content_container{ .content_container{

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

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