Slideshow not functioning correctly javascript

Question

I'm having trouble with my slide show. Currently, the first loop of images keeps flashing back to 'image3' but once the slideshow has got past the first loop it seems to function correctly. I need the slideshow to function correctly first time. Any help would be appreciated! Here is my relevant code:

HTML

<div id="slideshow">
    <div>
        <img src="img/image1.jpg" alt="Image1" class="scale-with-grid" width="100%" height="100%" />
    </div>
    <div>
        <img src="img/image2.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" />
    </div>
    <div>
        <img src="img/image3.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" />
    </div>
</div>

CSS

#slideshow {
    margin: auto;
    position: relative;
    width: 637px;
    height: 396px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Javascript

$("#slideshow > div:gt(0)").hide();

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 5000);

Thanks!

Answer 1

look at some of my source code on my website:

<div id="mySwipe" style="max-width: 500px; margin: 0px auto; visibility: visible;" class="swipe">

 <div class="swipe-wrap" style="width: 3000px;">



         <div data-index="0" style="width: 500px; left: 0px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/oFnHbEQ.png" style="width:" "100%"=""></div>

         <div data-index="1" style="width: 500px; left: -500px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/qFUDwaC.png" style="width:" "100%"=""></div>

         <div data-index="2" style="width: 500px; left: -1000px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/XKxbTCK.png" style="width:" "100%"=""></div>

         <div data-index="3" style="width: 500px; left: -1500px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(0px, 0px) translateZ(0px);"><img src="http://i.imgur.com/a1YKHeR.png" style="width:" "100%"=""></div>

         <div data-index="4" style="width: 500px; left: -2000px; -webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate(500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/YzLZS1Y.png" style="width:" "100%"=""></div>

         <div data-index="5" style="width: 500px; left: -2500px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/F05kEd7.png" style="width:" "100%"=""></div>

  </div>

="text-align:center;padding-top:20px;">


  <button onclick="mySwipe.prev()">prev</button>

  <button onclick="mySwipe.next()">next</button>


</div>

<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="swipe.js"></script>

<script>

var elem = document.getElementById('mySwipe');

window.mySwipe = Swipe(elem, {

   startSlide: 0,

   auto: 2000,

   continuous: true,

   disableScroll: true,

   stopPropagation: true,

   callback: function(index, element) {},

   transitionEnd: function(index, element) {}

});