CODEWITHSUNDEEP
jqueryhtmlcss
Drobson
Drobson

Reputation: 5

Need help making this Slideshow create a loop so it timesout and then times back in

So I am currently working on creating a slideshow using jquery and what I'm having trouble with is making a reoccurring loop that will time out the slide show for a certain amount of time ie. 10mins and then have it reappear and run the slideshow again and then continue this forever. I can't seem to get anything to work.

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

setInterval(function(){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);
<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
            <div>
                <img src="https://i.imgur.com/rDI2jF4.png" alt="">
            </div>
            <div>
                <img src="https://i.imgur.com/DS5peX5.png" alt="">
            </div>
        </div>

So as I stated I am able to get the slideshow up and running but need to know where I can find information on what I need for timing the slideshow out for a set amount of time and then bring it back in to run the slideshow again.

Upvotes: 0

Views: 39

Answers (1)

Andu Andrici
Andu Andrici

Reputation: 853

So you want the whole thing to disappear after x time and reappear after y time?
Doesn't setTimeout work for this?

.hidden { display: none; }

function myInterval(showInterval , hideInterval) {
    var elem = document.getElementById('slideshow');
    var targetInterval;

    if ((" " + elem.className + " " ).indexOf( " " + hidden + " " ) > -1) {
        elem.classList.remove('hidden');
        targetInterval = showInterval;
    } else {
        elem.classList.add('hidden');
        targetInterval = hideInterval;
    }
    setTimeout(function(){ myInterval(showInterval , hideInterval) }, targetInterval);
};

myInterval(showInterval , hideInterval);
// showInterval = how long the animation will be visible
// hideInterval = how long the animation will be hidden

// this will hide it at the start, and show it after the 'hide' interval
// to make it show from the start, add the 'hidden' class on the Element from the start

Or you could use setInterval instead, if you want it to be the same period of showing/hiding:

setInterval(function(){
    document.getElementById('slideshow').classList.toggle('hidden');
}, x); // x is the time for how long the animation will be visible/hidden

Upvotes: 1

Related Questions