What could be causing my cross fade to not repeat as intended?

I created a basic background image cross fader using the code found at http://jsfiddle.net/jRDkm/2/. This code was inspired by .

However, I'm encountering an issue where the slideshow only repeats once before fading to white. How can I modify the code to make it continuously repeat?

Here is the JS code:

function slideshow() {
$('#fullscreen-slider li:gt(0)').hide();
setInterval(function(){
    $('#fullscreen-slider :first-child').fadeOut()
    .next('li').fadeIn()
    .end().appendTo('#fullscreen-slider');
}, 3000);
};

Answer №1

Your current selector is not accurate. Please attempt the following:

$('#fullscreen-slider li:first').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');

To see a demonstration, visit: http://jsfiddle.net/jRDkm/5/

Answer №2

CHECK OUT LIVE DEMO

/* Code snippet from plugins.js */
function adjustElements() {
    $('ul#fullscreen-slider li').height( $(window).height() ).width( $(window).width() );
}

function startSlideshow() {
    var index = 0;
    var $slides =  $('#fullscreen-slider li');
    $slides.hide().eq(index).show();
    setInterval(function(){
        $slides.eq(index++ % $slides.length).fadeTo(600,1).siblings().fadeTo(600,0);
    }, 3000);
}

$(document).ready(function() {
    adjustElements();
    startSlideshow();
});

Answer №3

Check out this code snippet: http://jsfiddle.net/jRDkm/4/

function slideshow() {
    $('#fullscreen-slider li:gt(0)').hide();
    setInterval(function(){
        $('#fullscreen-slider li:eq(0)').fadeOut()
        .next('li').fadeIn()
        .end().appendTo('#fullscreen-slider');
    }, 3000);
};

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

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Seeking assistance. In the process of creating a nested div inside body > div > div . You can find more information in this Stack Overflow thread. Check out my JSFiddle demo here: https://jsfiddle.net/41w8gjec/6/. You can also view the nested div on the ...

Functionality of Ajax: Data fields containing numerous values

I'm confused about the data fields in the ajax function. Typically, the syntax for an ajax function looks something like this: $.ajax({ url: "/aaa/bbb/ccc", method: "SomeMethod", data: someData, success: function (res ...

Utilizing CSS to set a map as the background or projecting an equirectangular map in the backdrop

How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...

Deactivate filtering for the column in the header, while retaining it in the toolbar

I am currently working on implementing a jqGrid table. https://i.stack.imgur.com/d80M8.png My goal is to disable the filter functionality from the header column, while keeping it in the filter toolbar. Is there a way to deactivate the ui-search-input fo ...

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

Stop RequireJS from Storing Required Scripts in Cache

It seems that RequireJS has an internal caching mechanism for required JavaScript files. Whenever a change is made to one of the required files, renaming the file is necessary in order for the changes to take effect. The typical method of adding a version ...

Iterate over a JavaScript array and print out the value if the key is equal to or less than it

Can someone help me with automatically populating a unit price input using values from a JavaScript array? I am facing an issue where I am getting the value 1 returned, which is not present in my array values, and the correct unit price is not being displ ...

Is it possible to send the value of "this" as an argument to a different function in JavaScript?

I currently have the following code: $('#slider li').click(function () { var stepClicked = $(this).index(); alert(stepClicked); if (stepClicked != 0) { $('#cs_previous').removeClass('cs_hideMe'); } els ...

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

Modify the appearance of the post-content's color and background when hovering

I am struggling to achieve the goal of changing the background of the search box to transparent and making the search icon white on hover. Any help or suggestions would be greatly appreciated! Below is the code where I want to apply the hover CSS effect: ...

The form failed to be submitted even after undergoing ajax validation

Although this question has been asked many times before, I am still confused about where I went wrong. My goal is to validate a form using ajax and submit it if everything checks out. Below is the code snippet that I have been working with: ...

Can someone help me troubleshoot why my multi-step form is not functioning properly?

I've been working on a multi-phase form, but it's not behaving as expected. I've tried different code variations, but for some reason, it's not functioning properly. After spending two days on it, I'm starting to feel a bit frustra ...

unable to locate the PHP file on the server

Struggling to make an API call via POST method to retrieve data from a PHP file. Surprisingly, the code functions properly on another device without any hiccups. However, every time I attempt to initiate the call, I encounter this inconvenient error messag ...

Utilizing jQuery and DOM to interact with form elements

Below is the form content <form method="post"> <input type="hidden" name="resulttype" value="Create"> <table> <tr> <td>Full Name</td> <td><input ...

Tracking the advancement of synchronous XMLHttpRequest requests

Within the client-side environment, there exists a File-Dropzone utilizing the HTML5 File-API which allows users to drop multiple files for uploading to the server. Each file triggers the creation of a new XMLHttpRequest Object that asynchronously transfer ...

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

Should elements be concealed with CSS if they cannot be eliminated with php?

There are times when I struggle to deactivate a function or elements in PHP, particularly in PHP frameworks and CMSs. As a workaround, I often utilize display: none. However, I am concerned about potential issues this may cause in the future. Should I co ...

Halt period indicated in the document specifying the designated timeframe

If I have two files named index.php and fetch.php The contents of index.php are as follows: <script> $(document).ready(function(){ setInterval(function(){ $('#fetch').load('fetch.php') }, 1000); }); </sc ...