wanted to put dot/Circle Controls on my slideshow, can anyone help me?

Asked

Viewed 45 times

0

i would like some Dots below the slideshow for when clicking on the first dot the slider goes straight to the first slide, but I’m not getting, someone can help me?

HTML:

<html lang="pt-br"> 
  <head>
<meta charset="UTF-8"/>
<title> titulo </title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
 <script language="javascript" src="_javascript/funcoes.js">  </script>
 </head>
<section id="corpo">
  <body>
 <div class="slideshow-container">
    <img name="slide" style="width:100%"/>

    <a class="prev" onClick="prevImg()">&#10094;</a>
    <a class="next" onClick="nextImg()">&#10095;</a>
    </div>

    <br/>
</section>
 </body>
</html>

CSS3:

  *{box-sizing: border-box}

  .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  }

 /*prev/next controls */

  .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 250px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
   }

  .next {
  right: 0;
  border-radius: 3px 0 0 3px;
  }

   .prev:hover, next:hover {
      background-color: rgba(0,0,0,.8);
  }

JS:

var i = 0;
var images = [];
var time = 3000;

images[0] = 'imagens/img1.jpg';
images[1] = 'imagens/img2.jpg';
images[2] = 'imagens/img3.png';

function changeImg(){
document.slide.src = images[i];

if(i < images.length - 1){
    i++;
}else {
    i = 0;
}

setTimeout("changeImg()", time);
}

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

function prevImg(){
  document.slide.src = images[(i = i<0 ? 0 : i--)%3];
  if (i<=images.length) return true; //fim da lista
  return false;
}

window.onload = () => {
  let time = 3000;
  let id_interval = setInterval(() => {
    if(nextImg()) {
  clearInterval(id_interval);
}
  }, time);
 }
javascript html5 css3 carousel slideshow

1 answer

0

What you have to do in this case is to parameterize the image to be shown:

The Dots you dynamically add via Javascript

 <a class="dot" onClick="setImg(i)">i</a>

Javascript:

   var i = 0;
   var images = [];
   var time = 3000;

   images[0] = 'imagens/img1.jpg';
   images[1] = 'imagens/img2.jpg';
   images[2] = 'imagens/img3.png';

   function changeImg(){
   document.slide.src = images[i];

   if(i < images.length - 1){
       i++;
   }else {
       i = 0;
   }

   setTimeout("changeImg()", time);
   }

   function nextImg(){
     i = (++i)% images.length;
     document.slide.src = images[i];
     if (i === (images.length - 1) ) return true; //fim da lista
     return false;
    }

   function prevImg(){
     i = (i === 0 ? 0 : --i);
     document.slide.src = images[i];
     if (i === 0) return true; //fim da lista
     return false;
   }

   function setImg(img) {
         i = img;
         document.slide.src = images[i];    
   }

   function createLink(img) {
     return '<a class="dot" onclick="setImg(' + img +  ')">' + img + '</a>';
   }

   function createDots() {
     document.getElementById('dots').innerHTML = '';
     for (j=0; j < images.length; j++) {
       document.getElementById('dots').innerHTML += createLink(j);  
     }
   }

   window.onload = () => {

     createDots();


     let time = 3000;
     let id_interval = setInterval(() => {
       if(nextImg()) {
     clearInterval(id_interval);
   }
     }, time);
    }

Html:

   <html lang="pt-br"> 
     <head>
   <meta charset="UTF-8"/>
   <title> titulo </title>
   <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
    <script language="javascript" src="_javascript/funcoes.js">  </script>
    </head>
   <section id="corpo">
     <body>
    <div class="slideshow-container">
       <img name="slide" style="width:100%"/>

       <a class="prev" onClick="prevImg()">&#10094;</a>
       <a class="next" onClick="nextImg()">&#10095;</a>
        <div id="dots" class="dots">
        </div>
       </div>

       <br/>
   </section>
    </body>
   </html>

Css:

   *{box-sizing: border-box}

      .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
      }

     /*prev/next controls */

      .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 250px;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
       }

      .next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }

       .prev:hover, next:hover {
          background-color: rgba(0,0,0,.8);
      } 

    .dots {
       height:20px;
       text-align: center;

    }

    .dot {
      display: inline-block;
      border: 1px solid black;
      height: 20px;
      width: 20px;
      border-radius: 10px;
      text-align: center;

    }

    .dot:hover {
      cursor: pointer;
      opacity: 0.5;
    }

Browser other questions tagged javascript html5 css3 carousel slideshow

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