Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

1. Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

dark777
(usa Debian)

Enviado em 18/03/2023 - 22:30h

Boa noite galera beleza?

Estou estudando HTML5 e CSS3 junto com JavaScript e Jquery.

Entao prticando um pouco eu estou tentando fazer um SlideShow usando JQuery mas estou desde cedo neste código e não entendi o que eu preciso fazer para movimentar o Slide Show e esconder as imagens meu código é este aqui no pastebin:

https://pastebin.com/gXNfrgW1

CSS3 do slide:
https://pastebin.com/Bck52t3u

meu slide esta como na imagen que enviei o que está faltando para o slide se movimentar?

0 0

Quote

2. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

alexabolada
(usa Debian)

Enviado em 18/03/2023 - 22:30h

Acredito que você esteja tentando criar um slideshow. Para movimentá-lo e esconder as imagens, sugiro que use esse código usando JQuery:



$(document).ready(function() {

  // Variáveis

  var $slides = $('.slide'); // Armazena todos os slides

  var $currentIndex = 0; // Armazena o índice do slide atual

  

  // Esconde todos os slides, exceto o primeiro

  $slides.not(':first').hide();

 

  // Incrementa o índice de slides e o exibe o slide apropriado

  setInterval(function() {

    $slides.hide();

    $currentIndex = sign($currentIndex + 1);

    $currentSlide = $slides.eq($currentIndex);

    $currentSlide.fadeIn();

  }, 2000);

});



// Troca o sinal de um número inteiro

function sign(num) {

  if (num === ($slides.length - 1)) {

    num = 0;

  } else {

    num++;

  }

  return num;

}

No código acima, a variável $slides é usada para armazenar todos os slides, enquanto a variável $currentIndex é usada para armazenar o índice do slide atual. As imagens são escondidas e substituídas a cada 2 segundos (2000 ms). O método sign() é usado para trocar o sinal a cada vez que o índice do slide chega ao último slide.

0 0

Quote

3. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

dark777
(usa Debian)

Enviado em 18/03/2023 - 22:49h

alexabolada escreveu:

Acredito que você esteja tentando criar um slideshow. Para movimentá-lo e esconder as imagens, sugiro que use esse código usando JQuery:



$(document).ready(function() {

  // Variáveis

  var $slides = $('.slide'); // Armazena todos os slides

  var $currentIndex = 0; // Armazena o índice do slide atual

  

  // Esconde todos os slides, exceto o primeiro

  $slides.not(':first').hide();

 

  // Incrementa o índice de slides e o exibe o slide apropriado

  setInterval(function() {

    $slides.hide();

    $currentIndex = sign($currentIndex + 1);

    $currentSlide = $slides.eq($currentIndex);

    $currentSlide.fadeIn();

  }, 2000);

});



// Troca o sinal de um número inteiro

function sign(num) {

  if (num === ($slides.length - 1)) {

    num = 0;

  } else {

    num++;

  }

  return num;

}

@alexabolada eu testei o codigo mas some tudo até os botões controladores do slider somem o que eu faço no codigo?

wiki.anon

0 0

Quote

4. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

alexabolada
(usa Debian)

Enviado em 18/03/2023 - 22:49h

Verifique se você adicionou os botões controladores do slider nas tags html apropriadas. Você pode criar os botões com conteúdo html e adicioná-los à variável $slides antes de rodar o código. Algo assim:



// Armazena todos os slides

 var $slides = $('.slide, .control_button'); 



// Pega todos os slides e controladores do slide

$slides.each(function () { 

  $(this).html(

    '<div class="slide"></div>' + 

    '<div class="control_button">Botão 1</div>' + 

    '<div class="control_button">Botão 2</div>'

  );

});

0 0

Quote

5. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

msoliver
(usa Debian)

Enviado em 19/03/2023 - 01:50h

dark777 escreveu:

Boa noite galera beleza?

Estou estudando HTML5 e CSS3 junto com JavaScript e Jquery.

Entao prticando um pouco eu estou tentando fazer um SlideShow usando JQuery mas estou desde cedo neste código e não entendi o que eu preciso fazer para movimentar o Slide Show e esconder as imagens meu código é este aqui no pastebin:

https://pastebin.com/gXNfrgW1

CSS3 do slide:
https://pastebin.com/Bck52t3u

meu slide esta como na imagen que enviei o que está faltando para o slide se movimentar?

Boa noite Dark,
Da uma olhada neste site>
https://www.w3schools.com/howto/howto_js_slideshow.asp
Javascript puro, bem simples....
Resumindo, a lógica é:
"esconde tudo", e, mostra só o solicitado.

______________________________________________________________________
Importante:
lynx --dump https://www.vivaolinux.com.br/termos-de-uso/ | sed -nr '/^[ ]+Se/,/dou.$/p'
______________________________________________________________________
Nota de esclarecimento:
O comando: ACIMA, faz parte da minha assinatura.
Att.: Marcelo Oliver
______________________________________________________________________

2 0

Quote

6. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

dark777
(usa Debian)

Enviado em 19/03/2023 - 12:44h

msoliver escreveu:

Agora deu certo obrigado...

wiki.anon

0 0

Quote

7. Re: Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

msoliver
(usa Debian)

Enviado em 20/03/2023 - 20:43h

dark777 escreveu:

Agora deu certo obrigado...

wiki.anon

Boa noite Dark.
Dei uma avaliada no código que sugeri,
e constatei que dá para simplificar bastante....

Não são necessários os laços
em "function showSlides(n)",
setando display = "none", e dots[i].className....
em todos elementos,
Somente naquele que está "ativo",
e outras melhorias....

Caso tenha interesse, avise que posto....

______________________________________________________________________
Att.: Marcelo Oliver
______________________________________________________________________

0 0

Quote