如何解决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');
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。