this is the code for the HTML page slideshow

<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 4</div>
    <img src="./images/teck1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="./images/teck2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 4</div>
    <img src="./images/teck6.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

 <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="./images/teck4.jpg" style="width:100%">
    <div class="text">Caption Four</div>
  </div>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
</div>













      this is how I styled it

.slideshow-container{
  max-width: 1000px;

            margin: auto;
    min-height:400px;

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