Pessoal quero inserir um Carousel de videos em um site, quando a pessoa clicar no play o Carousel parar.
Alguém tem alguma ideia de como fazer?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Pessoal quero inserir um Carousel de videos em um site, quando a pessoa clicar no play o Carousel parar.
Alguém tem alguma ideia de como fazer?
Boa tarde Bruno,
Tente fazer com apenas HTML, CSS e JavaScript que acho que da certo. Use o JavaScript para fazer o efeito do carousel, como um carousel de imagens, mas ao invés de imagens em sua estrutura HTML use a tag própria para vídeos.
Se você for utilizar videos do Youtube, utiliza o código que eles disponibilizam para incorporaçao ao site (iframe)
Uma estrutura HTML que você poderia utilizar seria:
<!-- Carousel de videos -->
<div class="slideshow-container">
<div class="mySlideVideo fade">
<!-- Video aqui -->
</div>
<div class="mySlideVideo fade">
<!-- Video aqui -->
</div>
<div class="mySlideVideo fade">
<!-- Video aqui -->
</div>
<!-- botões de next e prev -->
<a class="prev" onclick="passaSlide(-1)">❮</a>
<a class="next" onclick="passaSlide(1)">❯</a>
</div>E seu JavaScript poderia ser da seguinte forma:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function passaSlide(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.querySelector(".mySlideVideo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}Espero ter te passado uma ideia boa para você começar o seu projeto, abraços!