https://www.routedesvinsdusud.com/wp-content/themes/routedesvinsdeprovence/scripts/EmblaInit.js

1document.addEventListener("DOMContentLoaded", function () {
2  // Options par défaut pour Embla Carousel
3  var defaultOptions = { loop: false, align: "start" }
4
5  // Sélectionnez tous les éléments avec l'attribut data-embla
6  var emblaNodes = document.querySelectorAll("[data-embla]")
7
8  emblaNodes.forEach(function (node) {
9    // Récupérer et parser les options de l'attribut data-embla
10    var dataOptions = node.getAttribute("data-embla")
11    var options = dataOptions ? JSON.parse(dataOptions) : {}
12
13    // Fusionner les options par défaut avec les options de data-embla
14    var mergedOptions = { ...defaultOptions, ...options }
15
16    // Initialisation d'Embla Carousel sur l'élément courant
17    var emblaApi = EmblaCarousel(node, mergedOptions)
18
19    function updateSlidesClass() {
20      var slides = node.querySelectorAll(".embla__slide")
21      var currentIndex = emblaApi.selectedScrollSnap()
22
23      slides.forEach(function (slide, index) {
24        if (index < currentIndex) {
25          slide.classList.add("past")
26        } else {
27          slide.classList.remove("past")
28        }
29      })
30    }
31
32    // Attachez l'événement et exécutez la mise à jour initiale
33    emblaApi.on("select", updateSlidesClass)
34    updateSlidesClass()
35
36    // Gestion des boutons de navigation
37    var section = node.closest("section")
38    if (section) {
39      var prevButton = section.querySelector(".embla__prev")
40      var nextButton = section.querySelector(".embla__next")
41
42      function updateButtonsState() {
43        if (prevButton) {
44          if (emblaApi.canScrollPrev()) {
45            prevButton.style.opacity = "1"
46            prevButton.style.pointerEvents = "auto"
47          } else {
48            prevButton.style.opacity = "0.5"
49            prevButton.style.pointerEvents = "none"
50          }
51        }
52
53        if (nextButton) {
54          if (emblaApi.canScrollNext()) {
55            nextButton.style.opacity = "1"
56            nextButton.style.pointerEvents = "auto"
57          } else {
58            nextButton.style.opacity = "0.5"
59            nextButton.style.pointerEvents = "none"
60          }
61        }
62      }
63
64      if (prevButton) {
65        prevButton.addEventListener("click", function () {
66          emblaApi.scrollPrev()
67        })
68      }
69
70      if (nextButton) {
71        nextButton.addEventListener("click", function () {
72          emblaApi.scrollNext()
73        })
74      }
75
76      emblaApi.on("select", updateButtonsState)
77      emblaApi.on("reInit", updateButtonsState)
78      updateButtonsState()
79    }
80  })
81})