slider-protic.html
última modificação
14/02/2025 10h38
slider-protic (1).html
— 9 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=rB94n4izbpZitlxJY7Gt5rEG04FVIOSBfsD8o7g9QOG90mPEYS57o1NK1DfvZpasWU0m6aDAE5TYzLio2nzXV_8DnkTlgJwtLnlRxgssgyL9CZLcHbNaivfFTixG6xbhdB2SBpPeubkAN8oylHIBL7pdxTqkwKWXruQyYb-sl3K_0xzy-Ky6APYkKwURt2dc" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvdGljL2Jhbm5lci9zbGlkZXItcHJvdGljLmh0bWwvQEBkb3dubG9hZC9maWxlL3NsaWRlci1wcm90aWMuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=bjlwt7yZ0oKer6HLffi_aD-d_ECH7cEk1gcxFNGLMkMK3Oh8JiUhMzYN-wVwUU1LIWEBzTRX64AVGV4UAw63HkVJ14-QuQnEOIpWdQgHbqNx4SC2tOvXpNZ1qJo1WdUWmTpIlsAeytsuXpxPUODNNEltqPmU_jZ82OBWe-dd7suY10c4oVYJA3T7neB-baENMcBDnaH1IB2dmuyI4IIIJTNniUXNdl5fiAIWT14LaZC7f2uvbNw9sME38WlgeUen" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvdGljL2Jhbm5lci9zbGlkZXItcHJvdGljLmh0bWwvQEBlZGl0LyUyMCUyMHdpZGdldCUyMCUyMGZvcm0ud2lkZ2V0cy5maWxlL0BAZG93bmxvYWQvc2xpZGVyLXByb3RpYyUyMCUyODElMjkuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=I067viiYaujNc6ANo70wngoA6FzLt2c_GbALTRamSHeQwwweYP04ERQbbzI4QvF_NHXAYf9zVh1ra7XIl8OrUqTBq-AH2ruTITmvsZS4qDNKoOlzCnswDCX5z8mSWOz2rAqNkq_QeV9bkT0qBQLOgPjDF-nj-h5TV3zYMbQUKXA" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvZ2VwL3NsaWRlci5odG1sL0BAZG93bmxvYWQvZmlsZS9zbGlkZXIuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=pUj-GoH-UPN7oQoVEOom4wmHccHMaeuvBcObzAInBvmdZtgfdAXUYjuy-m3ia_tmQ3tSRy3hUhKA8ILKcWp1mGIg1pMC0ej3olgtI6yDeOoJs7rX9HlhpmSRk-SVI16XgDRVU_6QnmrtrgzPaYXDHeoifBnFpOAKTN8uUNN4h-Y" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvZ2VwL3NsaWRlci5odG1sL0BAZG93bmxvYWQvZmlsZS9zbGlkZXIuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=aq1EwqPmFEkdZMOfOdrJVWcot4cD3xhPqWSAoM_aDpRf8GdXunoi8Yc4kqTY0bLzLXLEwxHO9-zuPzmA4d64DG60fb-WDnzuMT69ZHMH2PomMmgpQCwxgAw2WiONft-FjV-7WxJi4M9gP8fOoSIvsjeGRrNuF26VFkO6eakpNlQ" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvZ2VwL3NsaWRlci5odG1sL0BAZG93bmxvYWQvZmlsZS9zbGlkZXIuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=Eb8M0thR5s77VI7CleOWaEYTmWMdC0v2zDp4Th5ZWMZiDTI7tx1osk_IUjx0B1PBs29Nx-qa9GH21CG2Y5GqvKmsTgHSap6t-F7cJJ8AqbmtzqLGnSK76KAIBT0lLRDV__xhVg1Q1-XodFPjqkZgHw4aW_YCqdMhz0h2pcs6oEg" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvZ2VwL3NsaWRlci5odG1sL0BAZG93bmxvYWQvZmlsZS9zbGlkZXIuaHRtbA"/><script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=ylaVqnG4_u76bJDixNsYxXiG5TYvikscIW9qIbvUu6MmE4kn_wH0d0Nv5MRI-SBTH_Jl4Q5w1XsqszdzRvHOV_jxEI2ZBFrMkBlgoCaquye8RyqNA6ZBZBC-hbsBvGUx53HtsohN8nFzy_HVROV6KFTljNjDjvV0xH64Pcz7yKA" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cHM6Ly91Zm9iLmVkdS5ici9hLXVmb2IvZXN0cnV0dXJhL3Byby1yZWl0b3JpYXMvcHJvZ2VwL3NsaWRlci5odG1sL0BAZG93bmxvYWQvZmlsZS9zbGlkZXIuaHRtbA"/><style type="text/css">
section.slider{
margin: 0 auto;
width: 100%;
height: auto;
padding: 0 !important;
overflow: hidden;
}
.slider-content{
width: 400%;
height: auto;
display: flex;
}
.slider-content input, .img-mobile {
display:none;
}
.slide-box {
width: 25%;
height: auto;
position: relative;
text-align: center;
transition: 0.9s;
}
.slide-box img {
width: 100%;
}
.nav-manual, .nav-auto {
position: absolute;
width: 100%;
margin-top: 35%;
display: flex;
justify-content: center;
}
.nav-manual .manual-btn, .nav-auto div{
border: 1px solid #016bab;
padding: 10px;
border-radius: 50%;
cursor: pointer;
transition: 1s;
}
.nav-manual .manual-btn:not(:last-child), .nav-auto div:not(:last-child) {
margin-right: 10px;
}
.nav-manual .manual-btn:hover {
background-color: #016bab;
}
#radio1:checked ~ .nav-auto .auto-btn1 {
background-color: #016bab;
}
#radio2:checked ~ .nav-auto .auto-btn2 {
background-color: #016bab;
}
#radio3:checked ~ .nav-auto .auto-btn3 {
background-color: #016bab;
}
#radio4:checked ~ .nav-auto .auto-btn4 {
background-color: #016bab;
}
#radio1:checked ~ .primeiro{
margin-left: 0%;
}
#radio2:checked ~ .primeiro{
margin-left: -25%;
}
#radio3:checked ~ .primeiro{
margin-left: -50%;
}
#radio4:checked ~ .primeiro{
margin-left: -75%;
}
@media screen and (max-width: 900px) {
.img-desktop {
display: none;
}
.img-mobile {
display: block;
max-height: 80%
}
.nav-auto, .nav-manual{
margin-top: 30%;
}
}
</style>
</head>
<body>
<section class="slider">
<div class="slider-content">
<input type="radio" name="radio-btn" id="radio1">
<!-- <input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4"> -->
<div class="slide-box primeiro" >
<!-- COLOCAR O LINK DEPOS DE "href="LINKAQUI" -->
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/seh/informe-seh" target="_blank" rel="noopener noreferrer">
<img class="img-desktop" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/seh-protic.png">
<img class="img-mobile" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/seh-protic.png" alt="slide 1">
</a>
</div>
<!--
<div class="slide-box" >
<a href="https://protic.ufob.edu.br/g-suite-for-education/item/683-links-e-dicas-para-o-g-suite" target="_blank" rel="noopener noreferrer">
<img class="img-desktop" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/banner-links-e-dicas-g-suite.png">
<img class="img-mobile" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/banner-links-e-dicas-g-suite.png" alt="slide 1">
</a>
</div>
<div class="slide-box">
<a href="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/manuais-e-guias/faq-da-politica-de-armazenamento-de-dados" target="_blank" rel="noopener noreferrer">
<img class="img-desktop" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/banner_poltica-armazenamento-de-dados.png">
<img class="img-mobile" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/banner_poltica-armazenamento-de-dados.png" alt="slide 1">
</a>
</div>
<div class="slide-box">
<a href="https://drive.google.com/file/d/1AKD5Bsdv5EWHy_HjX74XOvu5dY0976Yj/view" target="_blank" rel="noopener noreferrer">
<img class="img-desktop" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/novo_banner-e-mail-discentes.png">
<img class="img-mobile" src="https://ufob.edu.br/a-ufob/estrutura/pro-reitorias/protic/banner/novo_banner-e-mail-discentes.png" alt="slide 1">
</a>
</div> -->
<div class="nav-auto">
<div class="auto-btn1"></div>
<!-- <div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div> -->
</div>
<div class="nav-manual">
<label for="radio1" class="manual-btn"></label>
<!-- <label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label> -->
</div>
</div>
</section>
<script>
var radio = document.querySelector('.manual-btn')
var cont = 1
document.getElementById('radio1').checked = true
setInterval(() => {
proximaImg()
}, 5000)
function proximaImg() {
cont++
if (cont > 4){
cont=1
}
document.getElementById('radio'+cont).checked = true
}
</script>
</body>
</html>
Todo o conteúdo deste site está publicado sob a licença Creative Commons Atribuição-SemDerivações 3.0 Não Adaptada.