Cursos Profissionais
.modal-slideshow {
display: none;
position: fixed;
z-index: 9999;
inset: 0;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
padding: 2vh 2vw;
box-sizing: border-box;
}
.modal-slideshow .modal-content {
background-color: #ffc928;
border-radius: 10px;
padding: 20px;
width: auto;
max-width: 100%;
max-height: 100%;
text-align: center;
box-sizing: border-box;
position: relative;
overflow: auto;
}
.modal-slideshow .close {
position: absolute;
top: 10px;
right: 20px;
color: #000;
font-size: 28px;
font-weight: bold;
cursor: pointer;
z-index: 10;
}
.modal-slideshow .title {
font-size: 2em;
font-weight: bold;
margin-bottom: 5px;
color: white;
text-shadow: 1px 1px 4px black;
}
.modal-slideshow .subtitle {
font-size: 1.2em;
color: white;
text-shadow: 1px 1px 3px black;
margin-bottom: 20px;
}
.slideshow-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mySlides {
display: none;
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 12px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.3s;
user-select: none;
background-color: rgba(0,0,0,0.4);
border-radius: 50%;
transform: translateY(-50%);
z-index: 5;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.7);
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
<div id="slideshowModal" class="modal-slideshow">
<div class="modal-content">
<span class="close">×</span>
<div class="title">Pré-Inscrições Abertas</div>
<div class="subtitle">Esperamos por ti!</div>
<div class="slideshow-container">
<span class="prev">❮</span>
<span class="next">❯</span>
<a href="/site/https://docs.google.com/forms/d/e/1FAIpQLSexHYkzTTz2Ag8lMP1UTMpnN271s5OO1MvC8j9qUzslCb-dSQ/viewform" target="_blank">
<img class="mySlides" src="/site/images/documentos/noticias/2025/maio/pub_cursos/informatica.png" alt="Curso de Informática">
</a>
<a href="/site/https://docs.google.com/forms/d/e/1FAIpQLSexHYkzTTz2Ag8lMP1UTMpnN271s5OO1MvC8j9qUzslCb-dSQ/viewform" target="_blank">
<img class="mySlides" src="/site/images/documentos/noticias/2025/maio/pub_cursos/cptal.png" alt="Curso de Análises Laboratoriais">
</a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const modal = document.getElementById("slideshowModal");
const closeBtn = modal.querySelector(".close");
const slides = modal.getElementsByClassName("mySlides");
const prevBtn = modal.querySelector(".prev");
const nextBtn = modal.querySelector(".next");
let slideIndex = 0;
let timer;
function showSlide(index) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[index].style.display = "block";
}
function nextSlide() {
slideIndex = (slideIndex + 1) % slides.length;
showSlide(slideIndex);
}
function prevSlide() {
slideIndex = (slideIndex - 1 + slides.length) % slides.length;
showSlide(slideIndex);
}
function startAutoSlide() {
timer = setInterval(nextSlide, 4000);
}
function stopAutoSlide() {
clearInterval(timer);
}
// Inicializar
modal.style.display = "flex";
showSlide(slideIndex);
startAutoSlide();
// Navegação manual
nextBtn.onclick = () => {
stopAutoSlide();
nextSlide();
startAutoSlide();
};
prevBtn.onclick = () => {
stopAutoSlide();
prevSlide();
startAutoSlide();
};
closeBtn.onclick = () => {
modal.style.display = "none";
stopAutoSlide();
};
window.onclick = (event) => {
if (event.target === modal) {
modal.style.display = "none";
stopAutoSlide();
}
};
});
</script>