Slider Shows no image

Question

Currently i have one image but later it will be more than 1.
This Code Shows me 1st image and later shows blank but i want it to show 1st image again when there is single image.
But it works Perfect when there are more than one image

<div class="slideshow-cont">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="mySlides fade">
                        <asp:ImageButton ID="Image1" runat="server" CssClass="img img-responsive" ImageUrl='<%# Eval("Offer_image") %>' Width="100%" />
                </div>
        </ItemTemplate>
    </asp:Repeater>
</div>
<br />
<script language="jscript" type="text/jscript">
    var slideIndex = 0;
    showSlides();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1 }
            slides[slideIndex - 1].style.display = "block";
            setTimeout(showSlides, 2000); // Change image every 2 seconds
        }
    </script>