Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any suggestions for changes that could be made to the code?

Any help or advice would be greatly appreciated :)

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

setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);
body {
  box-sizing: border-box;
  padding: 3rem; 
}


.slider {
  background-color: #fff; 
}

.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>


</html>
javascriptjqueryhtmlcssanimation

Answer №1

To achieve the layered image effect in your slider, you must apply position: absolute to the .slider__slide class. This is necessary because elements with a default position of static or relative cannot overlay on top of each other. By using absolute positioning, you can stack the images as desired.

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

setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);
body {
  box-sizing: border-box;
  padding: 3rem; 
}


.slider {
  background-color: #fff; 
}

.slider__slide {
position: absolute;
}

.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>


</html>

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

Creating dynamic email content with Node.js using SendGrid templating

How can I properly format SendGrid's content using Node.js? I'm currently working on sending emails from a contact form within an application using SendGrid. I have a Google Cloud Function set up that I call via an HTTP post request. Although I ...

javascriptjsonnode.jsecmascript-6sendgrid

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Imagine a scenario where I have a page located at: www.mydomain.com When a user clicks on a button, it triggers the opening of a new window using: newWin = window.open("https://www.otherdomain.com","a","height=800,width=1000"); Now, my objective is to m ...

javascriptjqueryhtmldomwindow

Obtain the value of "Placeholder" using JavaScript in Internet Explorer without the need for JQuery

I have some custom Javascript code that checks for browser support of placeholders and creates them if not supported. This solution works on some older browsers, but not all, especially IE. The issue I am facing is retrieving the "Placeholder" value; curr ...

javascriptinternet-explorer

Having trouble accessing variable values within the nth-child selector in JavaScript

I am attempting to utilize the value of a variable within the element selector p:nth-child(0). Instead of hardcoding the number as 0, I want to dynamically assign the value of a variable. In this case, the variable is represented by i in a for loop. Howev ...

javascriptnode.jscheerio

VSCODE's intellisense feature seems to be ignoring CSS code within JSX files

I've been puzzling over why Visual Studio Code isn't recognizing CSS syntax inside JSX files. While I'm typing, CSS IntelliSense doesn't provide suggestions for CSS - only Emmet suggestions.https://i.stack.imgur.com/FegYO.png Despite t ...

cssreactjsvisual-studio-codejsxsyntax-highlighting

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

javascripthtmlcssreactjsmaterial-ui

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

htmlcss

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design

Move a 'square' to a different page and display it in a grid format after clicking a button

I am currently developing a project that allows students or schools to add projects and search for collaborators. On a specific page, users can input project details with a preview square next to the fields for visualization. Once the user uploads the ...

javascripthtmlcssgridviewcss-grid

The Flux Router in React Native

I am diving into the world of React Native and currently working on creating a practice app. The issue I'm facing is with the routing functionality in my project. At the moment, I have three main components: the app itself, the router component, and o ...

javascriptreactjsurl-routingnativeflux

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

When we POST an AJAX request to a server running locally, the code looks like this: xhr.open("POST", "http://localhost:9000/context/request"); xhr.addHeader(someCustomHeaders); xhr.send(someData); The webpage where this javascript is executed is also on ...

javascriptajaxhtmlgoogle-chromecors

Combine the values in the rows over a period of time

I have a set of three times in the format of Minute:Seconds:Milliseconds that I need to add together to get the total time. For example, let's say I have: 0:31.110 + 0:50.490 + 0:32.797, which equals 1:54.397. So how can I achieve this using JavaScr ...

javascriptjquery

Is it necessary to store tokens in cookies, local storage, or sessions?

I am currently utilizing React SPA, Express, Express-session, Passport, and JWT. I find myself puzzled by the various client-side storage options available for storing tokens: Cookies, Session, and JWT/Passport. Is it necessary to store tokens in cookies, ...

javascriptreactjscookiesjwtlocal-storage

Implementing a 'Load More' button for a list in Vue.js

I am currently working on adding a load more button to my code. While I could achieve this using JavaScript, I am facing difficulties implementing it in Vue.js. Here is the Vue code I have been working with. I attempted to target the element with the compa ...

javascriptvue.js

Is OnPush Change Detection failing to detect state changes?

Curious about the issue with the OnPush change detection strategy not functioning properly in this demonstration. My understanding is that OnPush change detection should activate when a property reference changes. To ensure this, a new array must be set e ...

javascriptangulartypescriptrxjs

Dynamic data retrieval with the power of JavaScript and AJAX

When attempting to send data using AJAX in PHP, I encountered an issue with my jQuery click function on a button that sends data only when the quantity is greater than 1. The error arises because PHP does not recognize the variables 'name' and &a ...

javascriptphpjqueryajax

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Nested solution object populated with promises

Looking for a solution similar to the npm libraries p-props and p-all, but with the added functionality of recursively resolving promises. const values = { a: () => Promise.resolve(1), b: [() => Promise.resolve(2)], c: { d: () =&g ...

javascriptobjectnpmrecursionpromise

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

I was attempting to create a feature similar to a multi-select, where users could either choose a value from a list or enter a new value. The selected value should be added to an array when the user presses the enter key. To monitor changes in the input ...

javascriptreactjs

Stop text from being selected across all browsers in Firefox

My current CSS includes: *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } If you visit http://jsfiddle.net/KyF5x/ and click be ...

htmlcss