Implementando jquery em slideshow css puro, vinculando radios com lables

Alan Arnese · Maio 23, 2019

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

Michael Granados · Maio 25, 2019

Segue: https://jsfiddle.net/tf85bx9g/

Este é o javascript adicionado... aproveitei boa parte do exemplo que você passou. Mas basicamente o segredo está no setInterval e no clearInterval. Quanto à navegação você pode utilizar o window.history.pushState mas como você me parece um cara sagaz vou deixar você quebrar a cabeça :-)

Qualquer coisa, grita!

var slideshowInterval = null;

function startSlideshow() {
  slideshowInterval = setInterval(function () {
    var next = $('.active').next('.bar');
    if (!next.length) {
      next = $('.bar:eq(0)');
    }
    next.click();
  }, 2000);
}

function stopSlideshow() {
	clearInterval(slideshowInterval);
}

startSlideshow();

$('.slides')
  .on('mouseover', stopSlideshow)
  .on('mouseleave', startSlideshow);