/    Sign up×
Community /Pin to ProfileBookmark

Fade Out and In animation for sliders

Copy linkTweet thisAlerts:
Jul 04.2021

Hi, I am trying to build this website https://ibb.co/QQWgm76 where the header has 3 sliders which you can see in the image but I have a problem. When the slide moves to the next one I want all the elements from the slider to fade out and when the next slider comes out I want the elements to fade in. I don’t want the sliders to move from left to right, I just want the elements to fade out and then in. I tried following this [tutorial](https://www.youtube.com/watch?v=gBzsE0oieio&t=1849s) and I tried to remove them transition and animate the elements using classes but I could not make it work.
The may problem I have is knowing which slide is the current, the next. I don’t know how to use the index in this situation. A second problem would be that I don’t know how to animate out the elements when the next slide is about to become the main slide.

Here is the code. I have replaced the images because I could not share those as well.
https://codepen.io/raul-rogojan/full/WNjQPyQ

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJul 05.2021 — This is a demo showing how to fade images:
``<i>
</i> &lt;style&gt;
#demo-fade {
position: relative;
}

#demo-fade img:not(:first-child) {
position: absolute;
left: 0;
top: 0;
}

#demo-fade img {
/* By default images are invisible: */
opacity: 0;
/* Use transition in order to fade images smoothly: */
transition: opacity 1s;
}

#demo-fade img.active {
/* Make active image visible by setting it's opacity to 1: */
opacity: 1;
}
&lt;/style&gt;
&lt;div id="demo-fade"&gt;
&lt;img class="active" src="images/dia0.jpg"&gt;
&lt;img src="images/dia1.jpg"&gt;
&lt;img src="images/dia2.jpg"&gt;
&lt;/div&gt;
&lt;button class="btn-demo-fade" data-idx="1"&gt;Slide 1&lt;/button&gt;
&lt;button class="btn-demo-fade" data-idx="2"&gt;Slide 2&lt;/button&gt;
&lt;button class="btn-demo-fade" data-idx="3"&gt;Slide 3&lt;/button&gt;
&lt;script&gt;
window.addEventListener('click', event =&gt; {
// Check if button for fading images was clicked:
if (event.target.classList.contains('btn-demo-fade')) {
// Remove class "active" for current image in order to make it invisible:
document.querySelector('#demo-fade img.active').classList.remove('active');
// Get index of image the button is assigned to:
const idx = event.target.dataset.idx;
// Add class "active" in order to make it visible:
document.querySelector('#demo-fade img:nth-child(' + idx + ')').classList.add('active');
}
});
&lt;/script&gt;<i>
</i>``
Feel free to adapt it to your project.

However, there are a lot of scripts for slideshows out there. E. g. Cycle2 is featuring many types of transitions, including slide and fade:

https://vadus.tk/cycle2/
Copy linkTweet thisAlerts:
@codyhillauthorJul 05.2021 — @Sempervivum#1633717 I got to this point

``<i>
</i>let index = 0;

nextButton.addEventListener("click", () =&gt; {
index++;
if (index &gt; slides.length - 1) {
index = 0;
}

slides.forEach((slide, i) =&gt; {
slide.classList.remove("show");

if (i === index) {
slide.classList.add("show");
}
});
});<i>
</i>`</CODE>

The problem is that I want to add a translate out and one in. In other words, I want to move the slide-out off the screen and then move the next slide on the screen.

I tried this:
``<i>
</i>let index = 0;

nextButton.addEventListener("click", () =&gt; {
index++;
if (index &gt; slides.length - 1) {
index = 0;
}

slides.forEach((slide, i) =&gt; {
slide.classList.remove("show");
slide.classList.add("fade-out");

if (i === index) {
slide.classList.add("show");
slide.classList.add("fade-in");
}
});
});<i>
</i>`</CODE>

But it works really weird, coz is sliding the first slide out, but does not slide the next slide in, it only makes the opacity 1. but on the 3rd slide, it does slide it in.

Those are the CSS classes I use:
<CODE>`<i>
</i>.hide {
opacity: 0;
}
.show {
opacity: 1;
}
.fade-out {
transform: translateX(100%);
}
.fade-in {
transform: translateX(0);
}<i>
</i>``
Copy linkTweet thisAlerts:
@SempervivumJul 05.2021 — I understood this:
>When the slide moves to the next one I want all the elements from the slider to fade out and when the next slider comes out I want the elements to fade in. I don't want the sliders to move from left to right, I just want the elements to fade out and then in

that way that you do not want a sliding animation but a fade in/out effect instead.
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...