Embed

<div class="carousel">

  <div class="text-slide active">
    <h1><b>בת אל</b></h1>
    <br>
<h1><b>שבת שלום </b></h1>
    <br><br>
    <h3><b>Entrée</b></h3>
<br>
    <h3>🕯️ Vendredi 31 Octobre - 17h13 🕯️</h3>
    <br>
<br>
    <h3><b>Sortie</b></h3>
<br>
    <h3>🌃 Samedi 1er Novembre - 18h19 🌃</h3>
<br>
<br>
    <h2><b>משיב הרוח ומוריד הגשם</b></h2>
  </div>

  <div class="text-slide">
    <h1><b>Paracha Lekh Lekha</b></h1>
    <br>
    <h3>Chaharit - 09h00</h3>
    <br>
    <h3>Fin du chéma - 09h18/10H05</h3>
    <br>
 <h3><b>Kiddouch samedi midi</b></h3> 
<br> 
    <h3>Minha suivi de séouda chelichit - 16h40</h3>
    <br>
    <h3>Chekia - 17h29</h3>
    <br>
  </div>

</div>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.carousel {
  width: 95%;
  max-width: 800px;
  margin: 50px auto;
  background: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;              /* marge interne (haut compris) */
  position: relative;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
  text-align: center;
}

.text-slide {
  position: absolute;
  inset: 0;                  
  display: flex;
  align-items: center;       
  justify-content: center;    
  flex-direction: column;
  opacity: 0;              
  transition: opacity 0.5s ease-in-out; 
  pointer-events: none;    
font-size: clamp(1.2rem, 3vw, 1.8rem);  
}

.text-slide.active {
  opacity: 1;                
  pointer-events: auto;
  z-index: 1;                
}

@media (max-width: 768px) {
  .carousel { width: 95%; }
}
</style>

<script>
(function() {
  function initCarousel() {
    const slides = document.querySelectorAll(".text-slide");
    const carousel = document.querySelector(".carousel");
    if (!slides.length || !carousel) return;

    let index = 0;

    (function setFixedHeight() {
      let maxHeight = 0;

      slides.forEach(slide => {
        const wasActive = slide.classList.contains("active");

        const saved = {
          position: slide.style.position,
          opacity: slide.style.opacity,
          visibility: slide.style.visibility
        };
        slide.style.visibility = "hidden";
        slide.classList.add("active");   
        slide.style.position = "static"; 
        slide.style.opacity = "1";

        const h = slide.offsetHeight;
        if (h > maxHeight) maxHeight = h;

        slide.style.visibility = saved.visibility || "";
        slide.style.position = saved.position || "";
        slide.style.opacity = saved.opacity || "";
        if (!wasActive) slide.classList.remove("active");
      });

      carousel.style.height = (maxHeight + 20) + "px";
    })();

    function showSlide() {
      const current = document.querySelector(".text-slide.active");
      if (current) current.classList.remove("active");
      index = (index + 1) % slides.length;
      const next = slides[index];
      // Laisse au navigateur le temps d'appliquer la classe retirée
      requestAnimationFrame(() => next.classList.add("active"));
    }

    // Change toutes les 8s (8000 ms)
    setInterval(showSlide, 8000);
  }

  // Démarre même si le script est injecté tard par Durable
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initCarousel);
  } else {
    initCarousel();
  }
})();
</script>


Israel flag with a star of David against the sunset

ACIR - Beth El Romainville

Synagogue