Jump to content
Alan Arnese

Implementando jquery em slideshow css puro, vinculando radios com lables

Recommended Posts

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

Share this post


Link to post
Share on other sites

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);

 

---

Referencias:

http://api.jquery.com/next/

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By renan mafra
      Eu tenho 2 arquivos CSS externos que contém backgrounds da página.
      Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:
      No HEAD:
       
      <link href="‪arquivos_css/png.css" rel="stylesheet" id="key">
       
      No JS:
       
       
      ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND
      já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');
       
      e não funciona....
       
      o arquivo CSS externo contém backgrounds dentro do seletor HTML
      tipo :
       
      html {
            background-image.....(1);
            background-image.....(2);
            background-image.....(3);
           etc 
      }
      eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –
      o que pode estar acontecendo ? ?
       
       
       
       
    • By Marcos PP
      Preciso colocar a o atributo fadeIN e fadeOut em uma lista de acordo com o numero que o usuário clicar.
      Porem não estou conseguindo formular a função do script para isso
      No id #RESPOSTA tenho os números 1 - 5 - 10 - 20 - 30 - 40 - 50 - 100 - 200 - 300
      O que estou tentando e ao clicar na resposta 10 por exemplo, Todos os resultados da lista maiores que 10 sumam
      e logo depois se eu clicar em 50, permaneça os abaixo de 10 e apareça os ID's ate 50

      Como se fosse um filtro, clico em 10, só aparece os de 1 ate 10, clico em 50, so aparece os entre 1 ate 50 e assim por diante.

      Porem dinamicamente, so adicionando fadeOut e fadeIn
    • By Sapinn
      Salveee! Certo a dúvida que trarei aqui agora é bem complexa e eu sinceramente não sei se é realmente possível mas acho que não custa nada perguntar.
       
      Fiz um site de envio de textos, onde o aluno envia um texto e o professor corrigi até ai blz, queria saber como eu poderia fazer pra quando o professor marcar uma palavra aprece-se uma caixa de dialogo onde ele colocaria, por exemplo, a correção da palavra ou alguma explicação e essas informações seriam enviadas para o banco de dados quando o aluno acessa a correção desse texto e o ele passa-se  mouse por cima dessa palavra apareceria a correção em um balãozinho. Como exemplo desse comportamento que acabei de citar temos o google documents que faz algo desse jeito. Queria saber se isso pode ser possível sem exigir muito código ou muita coisa. Desde já agradeço.
    • By Rebeca Julia Bronzatti
      Boa tarde, bom ontem no meu projeto tudo estava funcionando normalmente, hoje assim que iniciei notei que os selects alguns buttons estavam divergindo do formato que eu gostaria, eu não faço ideia do porque isso, já que ele não apresenta erro e nada no código foi alterado pelo menos não nesses campos, já tentei fazer novamente mas a configuração continua, tentei alterar  pelo CSS mas infelizmente ele simplesmente ignora,  assim que iniciei hoje o projeto me deparei com esse erro Failed to load resource: the server responded with a status of 404 (Not Found) mas consegui resolver não sei se tem algo haver, se alguém puder me dar um help eu agradeceria muito nunca vi isso na vida. Eu to usando o materialize esse select já vem pronto.
      <div class="col s3"> <select name='tipo' class="browser-default"> <option value="" disabled selected>Tipo</option> <option value="Casa" class="tipo">Casa</option> <option value='Apartamento' class="tipo">Apartamento</option> <option>Sobrado</option> <option>Edicula</option> <option>KitNet</option> <option>Flat</option> <option>Sala Comercial</option> <option>Loja</option> <option>Galpão</option> <option>Terreno</option> <option>Fazenda</option> </select> </div>  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.