Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Carousel com videos

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?

1 resposta
solução!

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!