React-slick：在滑动时添加动画

问题描述

我已经使用react slick创建了一个滑块，现在需要在上一个和下一个按钮单击时更改幻灯片的过渡和动画。获得了一些帮助，可以在更改幻灯片的同时将类添加到当前活动的幻灯片，并为其添加动画和过渡效果。并在幻灯片完全改变后删除。我试过了，但是没有按预期工作。 首先，它不是在下一个或上一个按钮按钮单击时添加类 其次，它在滑动幻灯片上增加了类，但它会干扰其他轮播项目 这是我的代码

  const settings = {
    slidesToShow: 1,slidesToScroll: 1,arrows: false,autoplay: false,autoplaySpeed: 2000,infinite: false,beforeChange,afterChange,useCSS: false,useTransform : false
  }

  const beforeChange = (prev: number,next: number) => {
    let element = document.querySelector('.slick-active');
    element?.classList.add('next-slide-anim');
    setIndex(next);
  };

  const afterChange = (index : number) => {
    let element = document.querySelector('.slick-active');
    element.classList.remove('next-slide-anim')
  };

  const settings = {
    slidesToShow: 1,useTransform : false
  }

  const next = () => {
    sliderRef.current.slickNext()
  };

  const previous = () => {
    sliderRef.current.slickPrev();
  };

 <div className="home-slider">
            <div className="carousel">
              <Slider {...settings} className="carousel-inner" ref={ref => sliderRef.current = ref}>
                {
                  slides.map((slide: any,index) => (
                    <div className="carousel-item" key={index} ref={ref => carouselRef.current = ref}>
                      <div className="slide-content">
                        {index !== slides.length - 1 &&
                          <>
                            <h3>{slide.username}</h3>
                            <span id="user-icon-link">
                              <Link to="/" target="_blank">
                                <img src="/images/homeScreen/instagram.png" alt="link-icon" width="20" height="20" />{slide.userlink}</Link>
                            </span>
                          </>
                        }
                      </div>
                      <img src={slide.path} alt="Chicago" width="1100" height="500" />
                    </div>
                  ))
                }
              </Slider>
              {((slides.length !== 0) && (index !== slides.length - 1)) &&
                <>
                  {(index !== 0) && <a href="#/" className="carousel-control-prev" onClick={previous}>
                    <img src="/images/homeScreen/skipnewbtn.png" alt="Los Angeles" />
                  </a>}
                  {index !== slides.length - 1 && <a href="#/" className="carousel-control-next" id="next-btn" onClick={next}  >
                    <img src="/images/homeScreen/fast-forward-button.gif" alt="Los Angeles" />
                  </a>}
                </>
              }
            </div>
          </div>

解决方法

您可以使用传递给函数的索引值来获取***EmptyDbContext Created EmptyService Created EmptyService Disposed ***EmptyDbContext Created EmptyService Created EmptyService Disposed ***EmptyDbContext Created EmptyService Created EmptyService Disposed 中的幻灯片元素，而不使用.slick-active，然后从适当的幻灯片中添加/删除类。在没有看到CSS的情况下，我猜测您想在beforeChange中添加动画，但是如果效果更好，可以随时将beforeChange移到classList.add()。 / p>

afterChange

,

Ed 的反应不错，但还需要一招！

beforeChange 在 react-slick 添加他的内部类之前触发，比如“current-slide”，所以 next-slide-anim 被覆盖并且动画不显示......

为了解决这个问题，我们需要调用一个 Timeout 函数来在下一次滴答时触发代码。

const beforeChange = (prev: number,next: number) => {
  const prevSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${prev}"]`);
  const nextSlideElement = slider.current.innerSlider.list.querySelector(`[data-index="${next}"]`);
  setTimeout(() => {
    prevSlideElement.classList.remove('next-slide-anim');
    nextSlideElement.classList.add('next-slide-anim');
  });
}