Corousel not working properly showing flex form

My Css looks like this, for .mySlides i tried every display still its not working………………………………………………………………………………………………………………………………………………………………………………..

.mySlides {
  display: flex;
}

.slideshow-container {
  max-width: 100%;
  height: 450px;
  position: cover;
  margin: auto;
  margin-top: 100px;
}

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

.active {
  background-color: #3b3b3b;
}

span {
  color: black;
  /* background-color: white; */
}

*** This is my javascript code ***

var slideIndex = 0;
showSlides ();

function showSlides () {
  var i;
  var slides = document.getElementsByClassName ('mySlides');
  var 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 2 seconds
}
showSlides ();

This is my html code i have not made use of w3-animate style idk how to use that

<div class="slideshow-container">
        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/7/53ae79ec-df56-4877-b133-b92f4cfd8c7f1638892785287-EORS-Prebuzz-Banner-DK.gif"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/073805e4-f274-4d37-b5e3-8ef4766a19531639241779767-K_Winterwear_Dk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/b96ded76-646c-4baf-9422-7727cbf2b0a11639241779745-Kurtas_Dk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/314e5e3a-0ce4-4ab3-90a3-7d02d335dbb21639241779725-Casual-Wear_Desk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/11/16/11cc5325-37c6-4490-9adb-6f09ccb2a0781637049244895-luxe-banner.jpg"
            style="width: 100%"
          />
        </div>
      </div>
      <div style="text-align: center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>