Implementando jquery em slideshow css puro, vinculando radios com lables
Bom dia pessoal
Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.
Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
Segue abaixo os códigos
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<a href="#"> <img src="1.jpg" alt=""></a>
</div>
<div class="slide">
<a href="#"><img src="2.jpg" alt=""></a>
</div>
<div class="slide">
<a href="#"><img src="3.jpg" alt=""></a>
</div>
<div class="slide">
<a href="#"><img src="4.jpg" alt=""></a>
</div>
<div class="slide">
<a href="#"><img src="5.jpg" alt=""></a>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar active"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click', 'label', function() {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
style.css
*{ margin: 0px;padding: 0px;}
.slidershow{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
max-height: 70%;
}
.middle{
position: absolute;
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 60px;
height: 5px;
background-color: #c1c0c0;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}.bar:hover{
background: #ddcf19;
}.bar.active{ background: #ddcf19; }
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide a{ display: block;
width: 100%;
height: 100%;cursor: pointer;}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
}#r1:checked ~ .s1{
margin-left: 0;
}#r2:checked ~ .s1{
margin-left: -20%;
}#r3:checked ~ .s1{
margin-left: -40%;
}#r4:checked ~ .s1{
margin-left: -60%;
}#r5:checked ~ .s1{
margin-left: -80%;
}
Basicamente quero como o link abaixo mas vinculando meus controles de navegação
[Exemplo](http://jsfiddle.net/EjZzs/15/)Discussão (2)
Carregando comentários...