Slide with active initial image

Question

Slide with active initial image

Asked 5 years, 1 month ago

Viewed 43 times

0

Hello, I’m having a problem in my slide, it starts with the blank browser window and after the 5 sec starts to appear the images, and when it arrives in the last image it would have to return the first.

I’ve searched a lot of places, but every time I fix one thing, it ruins another.

I know I have to play an activation class in the first picture, but as I am informing the images by Js, I’m not getting.

the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Slide Show</title>

        <link rel="stylesheet" href="css/slider.css">    
    </head>
    <body>

            <div class="banner-topo">
                <img name="slide">
                  </div>
                  <a class="prev" onClick="prevImg()">&#10094;</a>
                  <a class="next" onClick="nextImg()">&#10095;</a>
                  <br/>
                </body>

        <script src="js/slider.js"></script>
    </body>
</html>

o Js:

var i = -1;
var images = 
          ['/img/home/banner/_perfiladeira_de_perfis_estruturais_esquadros.jpg',
          '/img/home/banner/_perfiladeira_de_telhas_metalicas_esquadros.jpg',
          '/img/home/banner/_maquina_de_corte_longitudinal_slitter_esquadros.jpg',
          '/img/home/banner/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg',
          '/img/home/banner/_linha_de_producao_esquadros.jpg',
          '/img/home/banner/_software_profil_esquadros.jpg'];

function nextImg(){
  document.slide.src = images[(++i)%3];
  if (i>=images.length) return true; 
}

function prevImg(){
  document.slide.src = images[(i = i<=0 ? 0 : i-1)%3];
}

window.onload = () => {
  let time = 4000;
  let id_interval = setInterval(() => {
    if(nextImg()) {
      clearInterval(id_interval);
    }
  }, time);
}'

Because vc does not initialize before entering setInterval, the image at position 0: ; ... window.onload = () => {
 let time = 4000; document.slide.src = images[0] ...

– Ivan Ferrer

2019/09/24 at 18:21
It worked, thank you very much.

– Renan Ranzani

2019/09/24 at 18:26

1 answer

Browser other questions tagged javascript slider slide

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

by Sam • **79,597** points · Answer 1 · 2019-09-24T18:36:44+00:00

In addition to starting the image with the path of the array’s first position images, it is also necessary to claim the value of i and instead of using the fixed value 3 in images[(++i)%3], replace 3 by the size of the array, otherwise it will only go to the third image:

document.slide.src = images[(++i)%images.length];

The right thing would be:

var i = -1;
var images = 
          ['/img/home/banner/_perfiladeira_de_perfis_estruturais_esquadros.jpg',
          '/img/home/banner/_perfiladeira_de_telhas_metalicas_esquadros.jpg',
          '/img/home/banner/_maquina_de_corte_longitudinal_slitter_esquadros.jpg',
          '/img/home/banner/_maquina_de_corte_longitudinal_e_transversal_combinado_esquadros.jpg',
          '/img/home/banner/_linha_de_producao_esquadros.jpg',
          '/img/home/banner/_software_profil_esquadros.jpg'];

function nextImg(){
  document.slide.src = images[(++i)%images.length];
  if (i>=images.length) return true;
}

function prevImg(){
  document.slide.src = images[(i = i<=0 ? 0 : i-1)%3];
}

window.onload = () => {
   ++i;
   document.slide.src = images[0];
  let time = 4000;
  let id_interval = setInterval(() => {
    if(nextImg()) {
      clearInterval(id_interval);
    }
  }, time);
}