Javascript remove and add class with a slow transition on a carousel

Question

I have created a carousel with Javascript. I am using animate.css which can enable me to use some cool transitions. I have a class called fadeInLeft also applied to each div. I am now trying to remove fadeInLeft and add FadeOutLeft to make the transition smooth. However, at the moment everything I have tried just makes the current slide disappear sharply. The idea after the current slide has faded out to the left I would like the next slide to fade in from the left. Can anyone please advice me how I could achieve this?

var index = 1;

    function plusIndex(n) {
        index = index + 1;
        showImage(index);
    }

    showImage(1);

    function showImage(n){
        var i;
        var x = document.getElementsByClassName("carousel");
        if(n > x.length){index = 1};
        if(n< 1){ index = x.length};
        for(i=0;i<x.length;i++)
        {
            x[i].style.display = "none";
        }
        x[index-1].style.display = "block";
    }

<i type="button" onclick="plusIndex(-1)" class="fa fa-chevron-left arrowLeft arrow" aria-hidden="true"></i>
        <i type="button" onclick="plusIndex(1)" class="fa fa-chevron-right arrowRight arrow" aria-hidden="true"></i>
    <div class="carousel carousel1 animated fadeInLeft"></div>
    <div class="carousel carousel2 animated fadeInLeft"></div>
    <div class="carousel carousel3 animated fadeInLeft"></div>

use css transitions and do not set display per js but by css. instead set/remove css classes by js — MEE, Nov 18 '17 at 13:08
@beertwenty Can you please provide me a working code example of your coz right not I can't test it. — Harden Rahul, Nov 18 '17 at 13:10
Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — MEE, Nov 18 '17 at 13:15
I added this with Jquery but it just adds fade out to the new slide and not the active one.: $('.arrow').click(function() { $(".carousel").removeClass('fadeInLeft'); $(".carousel").addClass('fadeOutLeft'); }); — beertwenty, Nov 18 '17 at 13:16

score 1 · Answer 1 · edited Nov 20 '17 at 04:03

1

your tags have many classes firstly you select the tag maybe like this:
```
var div = document.getElementsByClassName[0];
```
you get the class list and remove fadeInLeft
```
div.classList.remove("fadeInLeft");
```
you add another class
```
div.classList.add("fadeOutLeft")
```

edited Nov 20 '17 at 04:03

Engineero

12,340
5
53
75

answered Nov 18 '17 at 13:16

L.B Eric

11
1

added this with Jquery but it just adds fade out to the new slide and not the active one.: $('.arrow').click(function() { $(".carousel").removeClass('fadeInLeft'); $(".carousel").addClass('fadeOutLeft'); }); – beertwenty Nov 18 '17 at 13:18
@beertwenty You need to specify which carousel shout fade in. (ID, .active) – MEE Nov 18 '17 at 13:25
@PaulStrobach Using Jquery, How would I select which oen is active – beertwenty Nov 18 '17 at 13:41
Use `:nth-child` https://api.jquery.com/nth-child-selector/ and select the (index-1)-th child – MEE Nov 18 '17 at 13:41
in the css? but the slider works fine with js at the moment. – beertwenty Nov 18 '17 at 13:42
@beertwenty no use `$(".carousel:nth-child("+String(index-1)+")")` – MEE Nov 18 '17 at 13:45
$('.arrow').click(function() { $(".carousel").removeClass('fadeInLeft'); $(".carousel").addClass('fadeOutLeft'); $(".carousel:nth-child("+String(index-1)+")"); }); – beertwenty Nov 18 '17 at 14:03
@beertwenty No this is just for selecting the element that shall be animated/shown. (And I just see: Do not take index-1 but only index) – MEE Nov 18 '17 at 14:04

Javascript remove and add class with a slow transition on a carousel

1 Answers1