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

actus carrousselle

This commit is contained in:
ouidade 2024-07-06 18:02:47 +02:00
parent f2891d2beb
commit ac44975dd1
6 changed files with 81 additions and 26 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

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

@ -728,11 +728,12 @@ footer span.totop #toTop .arrow-up::before {
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: 50%; top: -20px;
-webkit-transform: translate(0, -50%); -webkit-transform: translate(0, -20px);
-ms-transform: translate(0, -50%); -ms-transform: translate(0, -20px);
transform: translate(0, -50%); transform: translate(0, -20px);
padding: 0; padding: 0;
padding-bottom: 2rem;
border: none; border: none;
outline: none; outline: none;
} }
@ -757,14 +758,14 @@ footer span.totop #toTop .arrow-up::before {
font-family: "slick"; font-family: "slick";
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
color: white; color: red;
opacity: 0.75; opacity: 0.75;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.slick-prev { .slick-prev {
left: -25px; left: 45%;
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
left: auto; left: auto;
@ -778,7 +779,7 @@ footer span.totop #toTop .arrow-up::before {
} }
.slick-next { .slick-next {
right: -25px; right: 45%;
} }
[dir=rtl] .slick-next { [dir=rtl] .slick-next {
left: -25px; left: -25px;
@ -1096,6 +1097,7 @@ footer span.totop #toTop .arrow-up::before {
} }
#actus-caroussel h2 { #actus-caroussel h2 {
width: fit-content; width: fit-content;
padding-bottom: 2rem;
} }
#actus-caroussel .content-actus .view { #actus-caroussel .content-actus .view {
display: flex; display: flex;
@ -1104,7 +1106,7 @@ footer span.totop #toTop .arrow-up::before {
width: 100vw; width: 100vw;
} }
#actus-caroussel .content-actus .views-row { #actus-caroussel .content-actus .views-row {
width: 25%; width: 500px !important;
padding: 1rem; padding: 1rem;
} }
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
@ -1113,13 +1115,13 @@ footer span.totop #toTop .arrow-up::before {
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
background-color: red; background-color: red;
height: 160px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
width: 100%; width: 100%;
height: auto; height: fit-content;
max-height: 160px; max-height: 250px;
object-fit: cover; object-fit: cover;
} }
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite {

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

@ -118,6 +118,24 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('arrowNext').disabled = currentSlide === maxSlide; document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
} }
function showSlides(index) {
const slides = document.querySelectorAll('.view');
const totalSlides = slides.length;
const visibleSlides = 3; // Number of slides to show at a time
const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0, Math.min(index, maxSlide));
// Calculate the offset for the transform
const offset = currentSlide * -100 / visibleSlides;
document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`;
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
function prevSlide() { function prevSlide() {
showSlides(currentSlide - 1); showSlides(currentSlide - 1);
} }
@ -154,6 +172,36 @@ document.addEventListener('DOMContentLoaded', function() {
showSlides(currentSlide); showSlides(currentSlide);
}); });
// slideshow home
$(document).ready(function(){
$('.content-actus .view').slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: true,
adaptiveHeight: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: true,
arrows: false,
draggable: true,
centerMode: true,
}
}]
});
console.log('salut slick home');
});
})(jQuery, window); })(jQuery, window);

10
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@ -20,8 +20,8 @@
} }
h2{ h2{
width: fit-content; width: fit-content;
padding-bottom: 2rem;
} }
// html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.home main#home div.layout-content div.content_container div.layout.layout--onecol div.layout__region.layout__region--content div.block-region-content div#actus-caroussel.views-element-container div.content-actus div div.js-view-dom-id-b0034e5565032847800e2aa5b7dc6211f2b856c751ed2284dfe542976a01c20c
.content-actus{ .content-actus{
.view{ .view{
display: flex; display: flex;
@ -31,7 +31,7 @@
} }
.views-row{ .views-row{
width: 25%; width: 500px !important;
padding: 1rem; padding: 1rem;
.node-type-actualite{ .node-type-actualite{
.field_field_images{ .field_field_images{
@ -40,12 +40,12 @@
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
background-color: red; background-color: red;
height: 160px; height: 250px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
img{ img{
width: 100%; width: 100%;
height: auto; height: fit-content;
max-height: 160px; max-height: 250px;
object-fit: cover; object-fit: cover;
} }
} }

19
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -10,11 +10,15 @@
$slick-font-path: "./fonts/" !default; $slick-font-path: "./fonts/" !default;
$slick-font-family: "slick" !default; $slick-font-family: "slick" !default;
$slick-loader-path: "./" !default; $slick-loader-path: "./" !default;
$slick-arrow-color: white !default; $slick-arrow-color: red !default;
$slick-dot-color: black !default; $slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default; $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default; $slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default; $slick-next-character: "\2192" !default;
// $slick-prev-character: url('../../img/prev.svg ') !default;
$slick-dot-character: "\2022" !default; $slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default; $slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default; $slick-opacity-default: 0.75 !default;
@ -71,11 +75,12 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: 50%; top: -20px;
-webkit-transform: translate(0, -50%); -webkit-transform: translate(0, -20px);
-ms-transform: translate(0, -50%); -ms-transform: translate(0, -20px);
transform: translate(0, -50%); transform: translate(0, -20px);
padding: 0; padding: 0;
padding-bottom: 2rem;
border: none; border: none;
outline: none; outline: none;
&:hover, &:focus { &:hover, &:focus {
@ -101,7 +106,7 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-prev { .slick-prev {
left: -25px; left: 45%;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
right: -25px; right: -25px;
@ -115,7 +120,7 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-next { .slick-next {
right: -25px; right: 45%;
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: -25px;
right: auto; right: auto;

4
web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig
View File

@ -34,14 +34,14 @@
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
{% endif %} {% endif %}
{{ title_suffix }} {{ title_suffix }}
<div class="__timeline-arrows"> {# <div class="__timeline-arrows">
<button id='arrowPrev' class="arrow arrow__prev"> <button id='arrowPrev' class="arrow arrow__prev">
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %} {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
</button> </button>
<button id='arrowNext' class="arrow arrow__next"> <button id='arrowNext' class="arrow arrow__next">
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %} {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
</button> </button>
</div> </div> #}
{% block content %} {% block content %}
<div class='content-actus'> {{ content }}</div> <div class='content-actus'> {{ content }}</div>
{% endblock %} {% endblock %}