slick home diap
This commit is contained in:
ouidade
parent
4b0d27fb10
commit
a93e133c5b
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -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 /////////////////////////////////
|
||||
$(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',
|
||||
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue