wanted to put dot / circle controls in my slideshow, can anyone help me?

Question

wanted to put dot / circle controls in my slideshow, can anyone help me?

Navigation

#1 by (0 votes)

0

I would like some dots below the slideshow so when I click on the first dot the slider goes straight to the first slide, but I can not, can anyone 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

asked by anonymous 10.08.2018 / 18:00

1 answer

Get the last level category - Wordpess Music player with wallpaper image on lock screen

score 0 · Answer 1

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

The dots you add dynamically 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;
    }