<div class="ooh-slider-container" role="region" aria-label="Content slider">
<div class="ooh-slider-controls">
<button class="ooh-slider-pause-btn" aria-label="Pause slideshow" aria-pressed="true">
<span aria-hidden="true" class="ooh-slider-pause-txt">Pause</span>
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-slider-pause.svg"
alt="Pause">
</button>
<div class="ooh-slider-indicators"></div>
<button class="ooh-slider-prev" aria-label="Previous slide">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-slider-chevron-left.svg"
alt="Previous">
<span aria-hidden="true">Previous</span>
</button>
<button class="ooh-slider-next" aria-label="Next slide">
<span aria-hidden="true">Next</span>
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-slider-chevron-right.svg"
alt="Next">
</button>
</div>
<ul class="ooh-slider-slides" aria-live="polite">
<li class="ooh-slider-slide slider-highlight-news" aria-hidden="false">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge primary">News</span>
<p>Once-Only Studio presents: a conversation with Lithuania</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/x/zwg5Ng"><span>Read the article</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
<li class="ooh-slider-slide slider-highlight-news" aria-hidden="true">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge primary">News</span>
<p>Mark your calendars! Upcoming Once-Only events in Q3 and Q4 of 2025</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/x/KQInNg"><span>Read the article</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
<li class="ooh-slider-slide ooh-slider-slide-event" aria-hidden="true">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge success">Upcoming event</span>
<p>Implementers Café #16<br>9 September 2025 | 10:00 - 12:00 | Online event</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Implementers+Cafe+16"><span>See event</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
<li class="ooh-slider-slide slider-highlight-news" aria-hidden="true">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge primary">News</span>
<p>Recent event “Towards a Simpler Single Market” sings praises of the Once-Only Technical System</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/x/4QEnNg"><span>Read the article</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
<li class="ooh-slider-slide ooh-slider-slide-event" aria-hidden="true">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge success">Upcoming event</span>
<p>Europe goes Once-Only – Portugal edition<br>25 - 26 September 2025 | Lisbon, Portugal</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/x/RCOlNQ"><span>See event</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
<li class="ooh-slider-slide slider-highlight-news" aria-hidden="true">
<div class="ooh-slider-content">
<div class="ooh-slider-content-copy">
<span class="badge primary">News</span>
<p>Commission publishes event report for the #6 Once-Only Technical System Projectathon</p>
</div>
<div class="ooh-slider-content-cta">
<a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/x/ZgAnNg"><span>Read the article</span><span
class="ico-cta-forward"></span></a>
</div>
</div>
</li>
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const slides = document.querySelector(".ooh-slider-slides");
const slideItems = document.querySelectorAll(".ooh-slider-slide");
const prevBtn = document.querySelector(".ooh-slider-prev");
const nextBtn = document.querySelector(".ooh-slider-next");
const indicatorsContainer = document.querySelector(".ooh-slider-indicators");
const pauseBtn = document.querySelector(".ooh-slider-pause-btn");
const pauseImg = pauseBtn.querySelector("img");
const pauseText = document.querySelector(".ooh-slider-pause-txt");
const sliderContainer = document.querySelector(".ooh-slider-container");
let currentIndex = 0;
let autoSlide = true;
let interval;
function updateSlide(index) {
const totalSlides = slideItems.length;
currentIndex = (index + totalSlides) % totalSlides;
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
slideItems.forEach((slide, i) => {
const isVisible = i === currentIndex;
slide.setAttribute("aria-hidden", !isVisible);
slide.querySelectorAll("button, a").forEach(el => {
el.tabIndex = isVisible ? "0" : "-1";
});
});
updateIndicators();
}
function updateIndicators() {
document.querySelectorAll(".ooh-slider-indicators button").forEach((dot, idx) => {
dot.classList.toggle("active", idx === currentIndex);
dot.setAttribute("aria-current", idx === currentIndex);
});
}
function createIndicators() {
slideItems.forEach((_, i) => {
const btn = document.createElement("button");
btn.setAttribute("aria-label", `Go to slide ${i + 1}`);
btn.dataset.index = i;
btn.addEventListener("click", (e) => updateSlide(Number(e.target.dataset.index)));
indicatorsContainer.appendChild(btn);
});
updateIndicators();
}
function startAutoSlide() {
stopAutoSlide(); // Make sure you don't create several intervals
interval = setInterval(() => updateSlide(currentIndex + 1), 5000);
}
function stopAutoSlide() {
clearInterval(interval);
}
prevBtn.addEventListener("click", () => updateSlide(currentIndex - 1));
nextBtn.addEventListener("click", () => updateSlide(currentIndex + 1));
pauseBtn.addEventListener("click", () => {
autoSlide = !autoSlide;
pauseBtn.setAttribute("aria-pressed", autoSlide);
pauseImg.src = autoSlide ? "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-slider-pause.svg" : "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ico-slider-play.svg";
pauseImg.alt = autoSlide ? "Pause" : "Play";
pauseText.textContent = autoSlide ? "Pause" : "Play";
stopAutoSlide(); // Always stop the interval before restarting one
if (autoSlide) startAutoSlide();
});
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") updateSlide(currentIndex - 1);
if (e.key === "ArrowRight") updateSlide(currentIndex + 1);
});
// Stop animation on hover or focus
sliderContainer.addEventListener("mouseenter", stopAutoSlide);
sliderContainer.addEventListener("mouseleave", () => { if (autoSlide) startAutoSlide(); });
sliderContainer.addEventListener("focusin", stopAutoSlide);
sliderContainer.addEventListener("focusout", () => { if (autoSlide) startAutoSlide(); });
// Remove focus from buttons inside .ooh-slider-controls
document.querySelectorAll('.ooh-slider-controls button').forEach(button => {
button.addEventListener('click', function () {
this.blur();
});
});
createIndicators();
startAutoSlide();
});
</script> |