How to use the same Script several times on a single page?

Asked

Viewed 41 times

-3

I have to use the same Script several times throughout the construction of the page, but I’m only able to use it once, when I try repeat the script structure in another slider it does not alter the image, only the first slider has changed the images and second slider is simply ignored. How do I make sure that all sliders have their images changed every 5 seconds (for example) and not just the first ?

body, html{
    height: 100%;
    margin: 0;

}

#slider-guerreiro{
    width: 37%;
    height: 480px;
    position: relative;
    float: right;
    margin-right: 5%;
}

#slider-guerreiro img{
    opacity: 0;

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: fill;

    transition: opacity 800ms;
}

#slider-guerreiro img.selected { 
    opacity: 1;
}

#slider-ladino{
    width: 37%;
    height: 480px;
    position: relative;
    float: right;
    margin-right: 5%;
}

#slider-ladino img{
    opacity: 0;

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: fill;

    transition: opacity 800ms;
}

#slider-ladino img.selected { 
    opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teste</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="slider-guerreiro"> 
    <img src="./img/guerreiro-img.jpg" class="selected" alt="Imagem1">
    <img src="./img/guerreiro-img2.jpg" alt="Imagem2">
    <script>
     var time = 5000, // variavel para o tempo de mudança das duas imagens 
    currentImageIndex = 0,
    images = document.querySelectorAll("#slider-guerreiro img")
    max = images.length;

    //função para passar de uma imagem para outra 
    function nextImage() {

      images[currentImageIndex].classList.remove("selected")

      currentImageIndex++

    if(currentImageIndex >= max)
        currentImageIndex = 0

    images[currentImageIndex].classList.add("selected")
    }

    function start() {
      setInterval(() => {
      nextImage()
      }, time)
    }
    start();

    </script>
  </div>   
  <div id="slider-ladino">
    <img src="https://br.pinterest.com/pin/840413980441818301/" class="selected" alt="Imagem1">
    <img src="./img/ladino-img2.jpg" alt="Imagem2">
    <script>
      var tempo = 3000, // variavel para o tempo de mudança das duas imagens 
      currentImageIndex = 0,
      imagens = document.querySelectorAll("#slider-ladino img")
      maximo = imagens.length; 

      //função para passar de uma imagem para outra 
      function passarImagem() {
        imagens[currentImageIndex].classList.remove("selected")
        currentImageIndex++

        if(currentImageIndex >= maximo)
            currentImageIndex = 0
        imagens[currentImageIndex].classList.add("selected")
      }
      
      function comecar() {
        setInterval(() => {
          
        }, tempo);
      }
      comecar();
    </script>
  </div> 


</body>
</html>

javascript html css slider

1 answer

-3

You are using the tag with a bad practice.

A good practice of using the Script tag is to place them at the bottom of the page, so the DOM will render first that the tag and will run smoothly.

I hope it helped! VLW!

  • You did, bro, thank you very much !

Browser other questions tagged javascript html css slider

You are not signed in. Login or sign up in order to post.