Symfony Profiler

<style>
.slider-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.slide {
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.slide.active {
display: flex;
}
.slide img {
width: 100%;
border-radius: 5px;
cursor: pointer;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 35px;
width: 50px;
height: 60px;
cursor: pointer;
z-index: 10;
border-radius: 5px;
}
.slider-btn:hover {
background: rgba(0, 0, 0, 0.8);
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
}
.dot.active {
background: white;
}
@media (max-width: 768px) {
.slide img {
max-width: 95%;
max-height: 60vh;
}
.slider-btn {
width: 40px;
height: 50px;
font-size: 25px;
}
.prev {
left: 5px;
}
.next {
right: 5px;
}
}
</style>
<div id="imageModal" class="modal" style="text-align: center !important;">
<span class="close" id="closeModal"
style="cursor: pointer; font-size: 30px; position: absolute; top: 10px; right: 20px; z-index: 9999; color: white;">
×
</span>
<div class="modal-body text-center slider-container">

<div class="slide active">
<a href="{{ path('front.inter.thematique') }}">
<img src="{{ asset('public/popup/calendrier_nouveau.jpeg') }}" style="wodth: 50%; height: 40%;" alt="Formation">
</a>
</div>

<div class="slide">
<a href="https://cimef-international.org/nos-thematiques/conformite-et-regulation/lutte-contre-le-blanchiment-de-capitaux-et-le-financement-du-terrorisme-lab-ft-securiser-vos-operations-et-renforcer-votre-conformite">
<img src="{{ asset('public/popup/lutte-contre-le-blachiment.jpeg') }}" style="wodth: 50%; height: 40%;" alt="Formation">
</a>
</div>

<div class="slide">
<a href="https://cimef-international.org/nos-thematiques/conformite-et-regulation/conformite-reglementaire-et-obligations-aml-kyc-dans-l-espace-uemoa-cemac">
<img src="{{ asset('public/popup/commite-de-reglementaire.jpeg') }}" style="wodth: 50%; height: 40%;" alt="Formation">
</a>
</div>

<div class="slide">
<a href="https://cimef-international.org/nos-thematiques/conformite-et-regulation/construire-et-developper-un-partenariat-efficace-entre-les-institutions-de-regulation-pratiques-internationales-et-cas-sectoriels">
<img src="{{ asset('public/popup/PPP.jpg.jpeg') }}" style="wodth: 50%; height: 40%;" alt="Formation">
</a>
</div>

<div class="slide">
<a href="https://cimef-international.org/formations/seminaires-internationaux/les-formats-et-les-traitements-des-operations-bancaires-via-le-systeme-swift-mx-iso-20022-les-aspects-operationnels/2014code">
<img src="{{ asset('public/popup/BANK-ASSUR-1.jpg.jpeg') }}" style="wodth: 50%; height: 40%;" alt="Formation">
</a>
</div>

<button class="slider-btn prev" id="prevSlide">❮</button>
<button class="slider-btn next" id="nextSlide">❯</button>
<!-- Indicateurs
<div class="dots">
<span class="dot active" data-slide="0"></span>
<span class="dot" data-slide="1"></span>
<span class="dot" data-slide="2"></span>
</div>
-->
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const modal = document.getElementById("imageModal");
const closeModal = document.getElementById("closeModal");
const openModal = document.getElementById("openModal");
const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");
const prevBtn = document.getElementById("prevSlide");
const nextBtn = document.getElementById("nextSlide");
let currentSlide = 0;
let autoSlide;
let isVisible = false; // état suivi manuellement, pas relu à chaque mutation
function showSlide(index) {
if (index >= slides.length) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = slides.length - 1;
} else {
currentSlide = index;
}
slides.forEach((slide, i) => {
slide.classList.toggle("active", i === currentSlide);
});
dots.forEach((dot, i) => {
dot.classList.toggle("active", i === currentSlide);
});
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
function startAutoSlide() {
stopAutoSlide();
autoSlide = setInterval(nextSlide, 2000);
}
function stopAutoSlide() {
clearInterval(autoSlide);
}
function isModalVisible() {
return getComputedStyle(modal).display !== "none";
}
// Démarrage automatique dès que la modal est visible au chargement
if (modal && isModalVisible()) {
isVisible = true;
startAutoSlide();
}
if (openModal) {
openModal.addEventListener("click", function (event) {
event.preventDefault();
modal.style.display = "flex";
isVisible = true;
startAutoSlide();
});
}
// Ne réagit que si la visibilité a réellement changé (pas à chaque mutation de style)
const observer = new MutationObserver(() => {
const nowVisible = isModalVisible();
if (nowVisible === isVisible) return; // rien n'a changé côté visibilité, on ignore
isVisible = nowVisible;
if (isVisible) {
startAutoSlide();
} else {
stopAutoSlide();
}
});
observer.observe(modal, { attributes: true, attributeFilter: ["style", "class"] });
closeModal.addEventListener("click", function () {
modal.style.display = "none";
isVisible = false;
stopAutoSlide();
});
modal.addEventListener("click", function (event) {
if (event.target === modal) {
modal.style.display = "none";
isVisible = false;
stopAutoSlide();
}
});
nextBtn.addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
nextSlide();
});
prevBtn.addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
prevSlide();
});
dots.forEach((dot, index) => {
dot.addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
showSlide(index);
});
});
modal.addEventListener("mouseenter", stopAutoSlide);
modal.addEventListener("mouseleave", function () {
if (isVisible) {
startAutoSlide();
}
});
});
</script>

templates/section/popup.html.twig line 1