etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

feat(carousel): javascript addon to manage slides navigation

Browse source
This commit is contained in:
Matthieu Bessat 2024-01-10 14:07:36 +01:00
parent 98a1177232
commit 7c6a26126f
2 changed files with 61 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
assets/scripts/carousel.js
View file

@ -12,16 +12,20 @@ function isElementInViewport (el) {
// little addon to enhance the carousel
var carousels = document.querySelectorAll('.carousel');
Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
// first addon to change "enabled" slide indicator (way to complicated)
Array.from(carousels).forEach((carousel) => {
let viewport = carousel.getElementsByClassName("carousel__viewport")[0];
let slides = carousel.getElementsByClassName("carousel__slide");
let nav_items = Array.from(carousel.getElementsByClassName("carousel__navigation-item"))
let last_scroll_pos = null;
viewport.onscroll = (_event) => {
let position = slides.length * viewport.scrollLeft / viewport.scrollWidth;
let position = Math.ceil(slides.length * viewport.scrollLeft / viewport.scrollWidth);
let direction = last_scroll_pos == null || last_scroll_pos < viewport.scrollLeft;
console.log("direction", direction);
console.log("position", position);
last_scroll_pos = viewport.scrollLeft;
nav_items.forEach((item, index) => {
@ -41,3 +45,52 @@ Array.from(document.getElementsByClassName("carousel")).forEach((carousel) => {
}
})
// second addon to replace the anchor with javascript managed jump scroll
// Iterate through each 'carousel__viewport' element
carousels.forEach(function(carousel) {
var viewport = carousel.querySelector('.carousel__viewport')
// Get all elements with the class 'carousel__slide' within the current 'carousel__viewport'
var slides = viewport.querySelectorAll('.carousel__slide');
var prevButtons = viewport.querySelectorAll('.carousel__prev');
var nextButtons = viewport.querySelectorAll('.carousel__next');
var navigationButtons = carousel.querySelectorAll('.carousel__navigation-button');
console.log(prevButtons)
console.log(navigationButtons)
prevButtons.forEach(function(prevButton, index) {
// remove href, for css only carousel
prevButton.removeAttribute('href');
prevButton.addEventListener('click', function() {
console.log("Click of previous", index)
if (index == 0) {
viewport.scrollLeft = slides.length * slides[0].offsetWidth;
return;
}
viewport.scrollLeft -= slides[0].offsetWidth;
});
});
nextButtons.forEach(function(nextButton, index) {
nextButton.removeAttribute('href');
nextButton.addEventListener('click', function() {
if (index == slides.length-1) {
viewport.scrollLeft = 0;
return;
}
viewport.scrollLeft += slides[0].offsetWidth;
});
});
navigationButtons.forEach(function(btn, index) {
btn.removeAttribute('href');
btn.addEventListener('click', function() {
viewport.scrollLeft = slides[0].offsetWidth * index;
});
});
});

11
layouts/index.html
View file

@ -2,7 +2,7 @@
<div class="cover__container">
<div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
<video playsinline autoplay muted loop>
<source src="https://static.etoiledebethleem.fr/videos/cover_trailer.webm" type="video/webm">
<source src="https://static.etoiledebethleem.fr/videos/teaser_v5.mp4" type="video/webm">
</video>
</div>
<div class="cover__overlay">
@ -45,7 +45,7 @@
<!-- Bourbon chateau, une crypte particulière, Les chartreux, Mignot et Villain -->
<li id="history__slide0" tabindex="0" class="carousel__slide">
<li id="history__slide0" tabindex="0" class="carousel__slide" data-slide-index="0">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image third">
@ -77,7 +77,7 @@
</div>
</li>
<li id="history__slide1" tabindex="0" class="carousel__slide">
<li id="history__slide1" tabindex="0" class="carousel__slide" data-slide-index="1">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div>
@ -120,7 +120,7 @@
</div>
</li>
<li id="history__slide2" tabindex="0" class="carousel__slide">
<li id="history__slide2" tabindex="0" class="carousel__slide" data-slide-index="2">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
@ -155,7 +155,7 @@
</li>
<li id="history__slide3" tabindex="0" class="carousel__slide">
<li id="history__slide3" tabindex="0" class="carousel__slide" data-slide-index="3">
<div class="slide-content history-component__container">
<div class="page-container slide-inner history-component__content">
<div class="layout-grid-image half">
@ -469,5 +469,6 @@
{{ $js := resources.Get "scripts/carousel.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
<script defer src="{{ $js.Permalink }}"></script>
{{ end }}