when the slider moving the dots are moving upside down?

Hello,

I know it is javascript problem but I wil ask it .

if some one has some idea about this little problem .

when the slider is fading;

1- the dots are moving upside down while it has to be stable?

2- plus there is smal yellow arow over the dots I don’t see in inspect where it is coming from?

<script>
	
 let slides = document.querySelectorAll('.mySlides');
        let dots = document.querySelectorAll('.dot');
        let slideIndex = 1;
        let timeoutID;

        const showSlides = (n) => {
            let i;

            if (n > slides.length) {
                slideIndex = 1;
            }
            if (n < 1) {
                slideIndex = slides.length;
            }

            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }

            for (i = 0; i < slides.length; i++) {
                dots[i].setAttribute('class', 'dot');
            }


            slides[slideIndex - 1].style.display = 'block';
            dots[slideIndex - 1].setAttribute('class', 'dot active');
            clearTimeout(timeoutID);
            timeoutID = setTimeout(autoSlides, 2000);
        };

        const plusSlides = (n) => {
            showSlides(slideIndex += n);
        };

        const currentSlide = (n) => {
            showSlides(slideIndex = n);
        };

        function autoSlides() {
            let i;

            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }

            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1;
            }

            for (i = 0; i < slides.length; i++) {
                dots[i].setAttribute('class', 'dot');
            }

            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].setAttribute('class', 'dot active');
            timeoutID = setTimeout(autoSlides, 2000);
        }

        autoSlides();
		





</script>

when you go to my website you can see that dots are moving up down when the slider is changing.

I want to know :

1-how I can make this dots when they are active stable (not moving) ?

2-I want to know where the smal yellow arrow is coming from on the dots ?

this is html code:

 <div class="slideshow-container">

        <div class="mySlides fade">
           
            <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="" style="width:100%">
            
        </div>

        <div class="mySlides fade">
         
            <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-1.jpg" alt="" style="width:100%">
           
        </div>

        <div class="mySlides fade">
          
            <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="" style="width:100%">
           
        </div>

      
    </div>

    <br>

    <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>
    </div>

.slideshow-container {
            max-width: 100%;
	        height:750px;
            position: relative;
            margin: auto;
        }

        .mySlides {
            display: none;
        }

       

        .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;
        }

        .active,
        .dot:hover {
            background-color: #717171;
        }

        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 5s;
            animation-name: fade;
            animation-duration: 5s;
        }

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

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

The page I need help with: [log in to see the link]