-3

Boa tarde

Estou fazendo um carrossel de imagens, quando executo o código no codepen.io funciona porem no site ele não executa a função somente o CSS, abaixo segue o script do JS, estou usando o google sites para incorporar o código e no meu documento HTML também não funciona

Agradeço desde já a ajuda

var stream = document.querySelector('.gallery__stream');
 var items = document.querySelectorAll('.gallery__item');
 var prev = document.querySelector('.gallery__prev');
 var next = document.querySelector('.gallery__next');

function slide1(){
document.querySelectorAll('.gallery__item');
stream.insertBefore(items[items.length - 1], items[0]);
items = document.querySelectorAll('.gallery__item');
setTimeout("slide3()", 1000)
}
function slide2(){
 stream.appendChild(items[1]);
 items = document.querySelectorAll('.gallery__item');
 setTimeout("slide2()", 1000)
 }
function slide3(){
 stream.appendChild(items[2]);
 items = document.querySelectorAll('.gallery__item');
setTimeout("slide1()", 1000)  
  }
* {
  width: 300px;
  height: 100px;
  box-sizing: border-box;
}

body {
  background-color: #000;
}

/* Gallery */

.gallery {
  position: absolute;
  top: 30%;
  transform: translateX(180%);
  width: 20%;
  height: 40%;
  max-height: 28vw;
  overflow: hidden;
}

.gallery__stream {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
}

.gallery__item {
  position: absolute;
  width: 50%;
  height: 100%;
  transition: 1s all ease;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 5px;
}

.gallery__item:nth-child(1) {
  left: 45%;
  z-index: 1;
  transform: translateX(-121%) scale(.8);
}

.gallery__item:nth-child(2) {
  left: 90%;
  z-index: 1;
  transform: translateX(-30%) scale(.8);
}

.gallery__item:nth-child(3) {
  left: 55%;
  z-index: 1;
  transform: translateX(-50%) scale(1);
  
}

.gallery:before,
.gallery:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 3;
}

.gallery:before {
  left: 0;
  background:  linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}

.gallery:after {
  right: 0;
  background:  linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}


.gallery__prev,
.gallery__next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translateX(-60%) translateY(-60%) scale(.8);
  cursor: pointer;
}

.gallery__prev {
  left: 0;
}

.gallery__next {
  left: 100%;
}


.bg-1 {
  background-image: url(https://drive.google.com/uc?export=view&id=1PyQWuoUGodqu92pgfUyOCZk5Dsy5p7T9);
 
}

.bg-2 {
  background-image: url(https://i.imgur.com/8946bSF.png);
  
}

.bg-3 {
  background-image: url(https://i.imgur.com/9Hc7hjb.png);
  
}
<div class="gallery">
  <div class="gallery__stream">
 <div class="gallery__item bg-1"></div>
 <div class="gallery__item bg-2"></div>
 <div class="gallery__item bg-3"></div>
</div>
</div>
<body onLoad="slide3()">
</body>

3 Respostas 3

-1

Bom dia obrigada pelas dicas olhando o console consegui ver o erro que estava aparecendo

:TypeError: Cannot read property 'appendChild' of Null in JS

Com isso verifiquei que era necessário colocar o "script" após o "body", depois da declaração do DOMelement e eu estava inserindo antes, já esta funcionando corretamente

-3

Estranho, era pra estar funcionando, testei aqui também e está funcionando normalmente, tenta abrir o console no site onde você colocou esse código e verifica se disparou algum erro que impediu de executar, talvez por lá mostre o problema.

-3

Veja o console, e poste a mensagem que aparecer aqui. Veja também se não pode ser o cache da página, tente executar em uma guia anônima. Tente trocar de navegador, verificar compatibilidade.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .