Hỏi về slideshow trong html

các pro giúp em với ạ.
giúp em em sửa lỗi khi mà em chạy đoạn code này lên thì hình ảnh trong slideshow k dc gói gọn lại.
mà nó bung ra một loạt.
khi click vào button nó mới gói gọn lại, nhưng nếu reset lại thì nó lại bung hết ra nv.
cám ơn!
đay là code file.js

/**
 * Created by DoanHandsome on 5/29/2016.
 */
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    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 < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
}

còn đây là code file.css

.slideshow-container {
    max-width: 800px;
    height: 400px;
    position: relative;
    margin-top: 20px;

}


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

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

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

}


.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;

}


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

}


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

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

}


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

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

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

đây là html

 <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 5</div>
         <img src="images/anh1.jpg" >
        </div>
        <div class="mySlides fade">
            <div class="numbertext">2 / 5</div>
            <img src="images/anh2.jpg">
        </div>
        <div class="mySlides fade">
            <div class="numbertext">3 / 5</div>
            <img src="images/anh3.jpg" >
        </div>
        <div class="mySlides fade">
            <div class="numbertext">4 / 5</div>
            <img src="images/anh4.jpg">
        </div>
        <div class="mySlides fade">
            <div class="numbertext">5 / 5</div>
            <img src="images/anh5.jpg" >
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>
   <div >
        <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>
        <span class="dot" onclick="currentSlide(5)"></span>
    </div>
    </div>