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

diaporama home js et css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-24 16:21:22 +02:00
parent 73c33f640a
commit 9aec2f02b9
331 changed files with 51340 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@
}, 5000);
}
//////////////
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
@@ -299,7 +299,7 @@
} else if (window.innerWidth <= 900) {
return 2; // Show 2 slides on medium screens
} else {
return 3; // Show 3 slides on large screens
return 2; // Show 3 slides on large screens
}
}
@@ -455,6 +455,80 @@ observer.observe(document.body, config);
});
// $(document).ready(function(){
// $('.config_pages--type--diaporama-home .field_field_images').slick({
// slidesToShow: 3,
// // slidesToScroll: 1,
// dots: false,
// arrows: false,
// centerMode: true,
// adaptiveHeight: true,
// autoplay: true,
// autoplaySpeed: 1500,
// infinite: true,
// // centerPadding: '100px',
// responsive: [
// {
// breakpoint: 810,
// settings: {
// slidesToShow: 1,
// adaptiveHeight: false,
// arrows: true,
// draggable: true,
// centerMode: true,
// autoplay: true,
// autoplaySpeed: 2000,
// }
// }]
// });
// console.log('salut slick home');
// });
////////////////////// 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,
// zoom: {
// maxRatio: 5,
// },
// If we need pagination
// pagination: {
// el: '.swiper-pagination',
// },
// Navigation arrows
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// And if we need scrollbar
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
// swiper.autoplay();
});
////////////////////// end diaporama home swiper /////////////////////////////////
})(jQuery, window);

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

@@ -3,12 +3,61 @@
.config_pages--type--diaporama-home{
position: relative;
.field_field_images{
img{
width: 100%;
height: auto;
.swiper-container{
.swiper-wrapper{
.swiper-slide {
// animation: motion-autoplay 4s infinite;
// // animation-name: motion-autoplay;
// // animation-duration: 4s;
// // animation-timing-function: ease;
// animation-delay: 3s;
// // animation-iteration-count: infinite;
// animation-direction: normal;
// // animation-fill-mode: none;
// animation-play-state: running;
// // animation-timeline: ;
.cadre-img-zoom{
max-height: 1281px;
overflow:hidden;
img{
width: 100%;
height: auto;
animation: zoomOut 3.5s ease-in infinite;
}
}
blockquote{
// color: white;
position: relative;
top: -30px;
// background-color: gray;
p{
font-size: 0.6rem !important;
font-family: 'gilroy-regular';
}
}
:hover{
color: blueviolet;
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
// 50% {
// transform: translateX(calc(-100% - 16px));
// }
100% {
transform: scale(1.1);
}
}
}
}
}
}
}
.content_container{
#block-quartiers-de-demain-titredepage{