Home > OS >  How can I move the dots to the center
How can I move the dots to the center

Time：10-19

I've been facing this issue. Whenever I place an image into the slideshow, the dots underneath move to a random position.

I also make the buttons clickable by using this code if possible.

    /* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

This is my complete code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    h1 {
      margin: 0px;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }
    
    .navbar a:hover,
    .dropdown:hover .dropbtn {
      background-color: MediumSeaGreen;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .auto-style2 {
      text-align: center;
      font-family: Verdana;
    }
  </style>
  <meta content="en-us" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

  <h1 style="background-color:MediumSeaGreen;" >
    <a  href="The Logic Store.html">The Logic Store</a></h1>

  <margin: 0px;>

</body>

<margin: 0px;>

</html>

<!DOCTYPE html>

<div  style="height: 45px">
  <a href="The Logic Store.html">Home</a>
  <div  style="height: 45px">
    <button >Phones
    </button>
    <div >
      <a href="Apple phone.html">Apple</a>
      <a href="Samsung.html">Samsung</a> <a href="Google.html">Google</a>
    </div>
  </div>

  <div  style="height: 45px">
    <button >Laptops
    </button>
    <div >
      <a href="Apple mac.html">Apple</a> <a href="Hp.html">HP</a>
      <a href="Dell.html">Dell</a>
    </div>
  </div>

  <a href="About.html">About</a>

</div>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .topnav a.active {
      background-color: #04AA6D;
      color: white;
    }
    
    h1 {
      margin: 0px;
    }
    
    <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {
      box-sizing: border-box;
    }
    
    body {
      font-family: Verdana, sans-serif;
    }
    
    .mySlides {
      display: none;
    }
    
    img {
      vertical-align: middle;
    }
    /* Slideshow container */
    
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    /* Next & previous buttons */
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }
    /* Position the "next button" to the right */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* On hover, add a black background color with a little bit see-through */
    
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #333;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* The dots/bullets/indicators */
    
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active {
      background-color: #717171;
    }
    /* Fading animation */
    
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    /* On smaller screens, decrease text size */
    
    @media only screen and (max-width: 300px) {
      .text {
        font-size: 11px
      }
    }
    
    .auto-style3 {
      max-width: 1000px;
      position: relative;
      margin: auto auto auto 0px;
    }
    
    a {
      color: #333333;
    }
    
    .auto-style4 {
      text-decoration: none;
      color: #000000;
    }
  </style>
</head>

<body>

  <div  style="left: 0px; top: 0px; height: 383px; width: 1410px;">

    <div >
      <div >1 / 3</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div >
      <div >2 / 3</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div >
      <div >3 / 3</div>
      <img src="TLS.png" style="width:100%&gt; &lt;div&gt;&lt;/div&gt; text-align:center">
      <span  onclick="currentSlide(1)"></span>
      <span  onclick="currentSlide(2)"></span>
      <span  onclick="currentSlide(3)"></span>
    </div>

    <script>
      let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i  ) {
          slides[i].style.display = "none";
        }
        slideIndex  ;
        if (slideIndex > slides.length) {
          slideIndex = 1
        }
        for (i = 0; i < dots.length; i  ) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className  = " active";
        setTimeout(showSlides, 2000); // Change image every 10 seconds
      }
    </script>

</body>

</html>

Furthermore, how can I know the size of the images that I can use for the slideshow?

Here are some htmlimages to show what I was trying to explain.

Btw I'm new to coding and am trying to figure out something, so any help is useful. Thank you in advance

CodePudding user response：

please add min-width: 100vw; to container

this make container full width so dot come to meddle of view port

CodePudding user response：

Add the following CSS:

#slider-container {
  width: 100%;
  max-width: 1410px;
  margin: auto;
}

By adding this, the #slider-container will always have a width of 100%, but never more than 1410px. If you want to center it, add margin: auto;.

Btw, the code you provided above is a REAL mess. I tried to clean it a little bit, but I suggest you to write a clean code.

See the snippet below.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: MediumSeaGreen;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.auto-style2 {
  text-align: center;
  font-family: Verdana;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

h1 {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif;
}

.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}


/* Slideshow container */

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


/* Next & previous buttons */

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


/* Position the "next button" to the right */

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


/* On hover, add a black background color with a little bit see-through */

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


/* Number text (1/3 etc) */

.numbertext {
  color: #333;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}


/* Fading animation */

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px
  }
}

.auto-style3 {
  max-width: 1000px;
  position: relative;
  margin: auto auto auto 0px;
}

a {
  color: #333333;
}

.auto-style4 {
  text-decoration: none;
  color: #000000;
}

#slider-container {
  width: 100%;
  max-width: 1410px;
  margin: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h1 style="background-color:MediumSeaGreen;" >
    <a  href="The Logic Store.html">The Logic Store</a>
  </h1>

  <div  style="height: 45px">
    <a href="The Logic Store.html">Home</a>
    <div  style="height: 45px">
      <button >Phones
        </button>
      <div >
        <a href="Apple phone.html">Apple</a>
        <a href="Samsung.html">Samsung</a> <a href="Google.html">Google</a>
      </div>
    </div>

    <div  style="height: 45px">
      <button >Laptops
        </button>
      <div >
        <a href="Apple mac.html">Apple</a> <a href="Hp.html">HP</a>
        <a href="Dell.html">Dell</a>
      </div>
    </div>

    <a href="About.html">About</a>

  </div>

  <div id="slider-container"  style="left: 0px; top: 0px; height: 383px;">

    <div >
      <div >1 / 3</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div >
      <div >2 / 3</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div >
      <div >3 / 3</div>
      <img src="TLS.png" style="width:100%&gt; &lt;div&gt;&lt;/div&gt; text-align:center">
      <span  onclick="currentSlide(1)"></span>
      <span  onclick="currentSlide(2)"></span>
      <span  onclick="currentSlide(3)"></span>
    </div>

  </div>

  <script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i  ) {
        slides[i].style.display = "none";
      }
      slideIndex  ;
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      for (i = 0; i < dots.length; i  ) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className  = " active";
      setTimeout(showSlides, 2000); // Change image every 10 seconds
    }
  </script>

</body>

</html>

Page link：https//www.codepudding.com/os/580565.html

Prev:Is there a way to get the label attached to an element to javascript?
Next:Bootstrap row doesn't put elements in a row
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding