Stop simple JavaScript slideshow after one loop

Question

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!

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

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

As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.

<div id="slideshow">
  <div>
  <img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
        tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
  </div>
  <div>
  <img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
        tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
  </div>
</div>

Answer 1

Try this:

var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');

//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();

intervalID = setInterval(function(){
    divs.eq(iterator).hide();
    iterator += 1;
    if (iterator === divs.length - 1) { clearInterval(intervalID); }
    divs.eq(iterator).show();
}, intervalDuration);

#slideshow > div { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
    <div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
    </div>
    <div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
    </div>
<div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
    </div>
</div>

The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.

Add as many DIVs as you like in your HTML to test it out. Hope it helps.

Update #1:

• Added CSS to hide the divs by default.
• Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
• Commented the filter line of JS.
• Added another JS line right below the previous filter line.
• This update should also load your GIF only when it is needed to appear, hence will not be running in the background.

Let me if this works.

Answer 2

Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)

JS/Jquery:

    $(function () {
        setTimeout(playSlideShow, 3000);

        function playSlideShow() {

            var currImgContainer = $('.showImg');
            if (!$(currImgContainer).hasClass('lastImg')) {
                $('.showImg').removeClass('showImg').next().addClass('showImg');
                setTimeout(playSlideShow, 3000);
            }
        }
    });

So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".

CSS:

    .slideShow > div:not(.showImg) {
        display: none;
    }

    .showImg {
        display: block;
        width: 400px;
        height: 400px;
    }

HTML:

<div class="slideShow" id="slideshow">
    <div class="showImg">
        <img src="Images/img1.png" alt="" />
    </div>
    <div>
        <img src="Images/img2.png" alt="" />
    </div>
    <div>
        <img src="Images/img3.png" alt="" />
    </div>
    <div class="lastImg">
        <img src="Images/img4.png" alt="" />
    </div>
</div>

This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".

Here is a fiddle

Hope it helps...