Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempts to make this work have been unsuccessful.

$("#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>

Although I have successfully launched the slideshow, I am seeking guidance on where to find resources or information about setting a time limit for the slideshow to pause, and then resume running after the specified interval.

jqueryhtmlcss

Answer №1

Are you looking to make the entire thing disappear and then reappear after a certain amount of time?
Have you tried using setTimeout 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

Alternatively, you could opt for setInterval if you want consistent periods of showing and hiding:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

htmlxpathsiblings

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

javascripthtmlcss

Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header. Despite trying to set the height to 100% on various elements such ...

htmlcss

What are some ways to incorporate a scrolling feed of updates similar to Facebook on my website to display all ongoing activities

I currently run an ASP.NET MVC website with a SQL server backend. Each table has a corresponding "History" table to track changes made (including who made the changes and when). While I can generate an audit report through a query, I am interested in crea ...

jqueryasp.net-mvcfacebook

Substitute the jQuery term "request.term"

Currently, I am implementing the jquery mobile autocomplete plugin for my mobile web application. It appears that I cannot utilize "request.term" as my dynamic query, so I am working on developing the liveQuery() function below to retrieve the value of my ...

jqueryajaxautocomplete

The jsTree rendering does not properly display the "closed" state of the JSON data nodes

Currently, I am in the process of setting up a jsTree instance to display a directory listing from a file server. However, I am encountering challenges with getting "sub-folder" or "sub-directory" nodes within the jsTree to show as open-able. Even though ...

jqueryajaxjsonmetadatajstree

Having trouble clicking the button due to the overlay blocking it?

This code contains the HTML portion <li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li> Below is the CSS code .navs:after { content: ""; position: ab ...

htmlcsshyperlink

Get rid of the standard shadow located on the bottom and right of the input text field

My input fields have some border rounding and are displaying an unwanted shadow on the right and bottom. I've tried using the box-shadow property to control the width, color, and other properties of the shadow, but it's not working as expected. H ...

htmlcss

Determine the presence of an element using its selector and retrieve a true or false value using jQuery or JavaScript

Is there a way to determine if an object is present on the page based on its selector? This method typically works: startpageentry = $('#' + startpageid) However, it does not return anything. I require a boolean value that can be used in an if ...

javascriptjquery

What are the steps for adding a JSON file to a GitHub repository?

Could someone lend a hand with my GitHub issue? I recently uploaded my website to a GitHub repository. The problem I'm facing is that I have a JSON file containing translations that are being processed in JavaScript locally, and everything works fine ...

javascripthtmlcssjsongithub

Using Codeigniter to handle an array of JSON objects in a POST request

When I check my jQuery post request parameters in Firebug, here is what I see: adults 1 applicants[] [object Object] attendees 1 children 0 The JSON object within the array named applicants in this post request contains data that I nee ...

phpjqueryjsoncodeigniter

Issues arise when using Jquery events in conjunction with AngularJS causing them to function

I have encountered an issue with my AngularJS menu code. I am sending an array to prepare the menu when the document loads. In this sequence, I have also added a click event to the generated menu. However, the click event does not fire if it is placed befo ...

javascriptjqueryangularjs

What is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

javascripthtmlangularbootstrap-5

Obtaining Values from Multiple Textboxes using jQuery in Model-View-Controller

I'm still learning about MVC and I encountered an issue while trying to edit a row and send the edited data to a controller method using jQuery and AJAX. When I click on edit, the specific row transforms into textboxes and the save ActionLink appears ...

jqueryajaxasp.net-mvcasp.net-mvc-4onclick

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

I am encountering an issue while attempting to load data into my Flask page and log it in the console. The error I keep receiving is shown below: VM165:1 Uncaught ReferenceError: data is not defined at <anonymous>:1:13 Below are snippets of cod ...

pythonhtmlflask

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

htmlcssflexbox

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...

cssexceptionrouteslaravel

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

javascripthtmlappframework

Launching Android Calendar app using Intent from a web browser (Chrome)

Did you know that you can use HTML links to open Android apps from within Chrome? Take a look at this resource. If you're trying to open the calendar app from an Android app, the intent should be content://com.android.calendar/time. Learn more about ...

androidhtmlgoogle-chromeandroid-intentcalendar

The Vue.js component fails to display when included within another component

I am experiencing an issue with a menu item not displaying properly in my Vue.js application. The menu item should display the text "This is a menu item", but for some reason it is not being processed and rendered by Vue. These are the main com ...

javascripthtmlvue.jsvuejs2vue-component