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?
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!