Remove class on previous slide

Question

I'm working on carousel using ant design and reactjs.

Im trying to make this slider 3d smooth carousel and I successfully able to do it.

my problem is on the previous image which is the left side. I cant remove the class that I added every time the carousel change, the class should be always in the last previous slide not on all previous slides.

Hope you understand me.

thanks.

SAMPLE CODE

constructor(props) {
    super(props);
    this.state = {
      prev: 0
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(a, b, c) {
    this.setState({
      prev: b
    });
  }
  // onLoad
  componentDidUpdate() {
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }
  // onChange
  componentWillUpdate() {
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }

Answer 1

You can remove all ocurrences of the class before asigning it to the new element with this function:

function removeClassFromPrevious() {
   var elements = document.getElementsByClassName("prev");

   var array = [].slice.call(elements);

   array.forEach(function(item, index){      
      item.classList.remove("prev");
   });

}

So you can call it like this:

  // onLoad
  componentDidUpdate() {
    removeClassFromPrevious();
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }
  // onChange
  componentWillUpdate() {
    removeClassFromPrevious();
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }

---

Or in a more reusable way:

function removeAllClassOcurrences(className) {
   var elements = document.getElementsByClassName(className);

   var array = [].slice.call(elements);

   array.forEach(function(item, index){      
      item.classList.remove(className);
   });

}
...
removeAllClassOcurrences("prev");