var slideIndex = 0;
var slides = document.getElementsByClassName("Slides");
var dots = document.getElementsByClassName("dot");
//I thought that maybe the error originated here so I triple checked everything here

showSlides();

function showSlides() {
    var i;
    for (i = 0; i < slides.length; i++) {
        if (slides[i].style.transform == "translateX(100%)") {
            slides[i].style.display = "none";
            //make sure slide that's about to be replaced doesn't interfere with next one.
            }
        slides[i].style.transform = "translateX(-100%)";
        //return all slides to -100% position. (Is already an issue because current
        //slide is supposed to move to the right but it'll jump. I'll figure this out,
        //this is NOT my question)
    }
    //??Error here. I know the line is empty I don't understand it neither??
    //Maybe it's the previous 'for' loop?

    slides[slideIndex - 1].style.transform = "translateX(100%)";
    //Move old slide 100%.
    slideIndex++;
    //Next Slide
    if (slideIndex > slides.length) { slideIndex = 1; }
    else if (slideIndex < 0) { slideIndex = slides.length; }
    //Self-explanatory
    slides[slideIndex - 1].style.display = "inline-block";
    slides[slideIndex - 1].style.transform = "translateX(0)";
    dots[slideIndex - 1].className += " active";
    //Move new slide in and activate concurrent dot
    if (slideIndex == 1) {
        setTimeout(showSlides(), 10000);
    }
    // I want the first picture to last longer
    else {
        setTimeout(showSlides(), 5000)
    }
}

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>

.Slides {
    position: absolute;
    transition: transform 2s;
    width: 100%;
    height: 100%;
    margin: 0;
}