Criando SlideShow com HTML5 CSS3 e Jquery [RESOLVIDO]

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

César
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?


  


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

Alexa Bolada
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.


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

César
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;
}


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.


@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


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

Alexa Bolada
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>'
);
});



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

Marcelo Oliver
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
______________________________________________________________________



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

César
dark777

(usa Debian)

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


msoliver escreveu:


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
______________________________________________________________________


Agora deu certo obrigado...

wiki.anon


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

Marcelo Oliver
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
______________________________________________________________________







Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts