ImageGallery игнорирование анимация на slideDuration
Я использовал в своем проекте библиотеку ImageGallery, и все работает хорошо, хотя есть одна неприятная вещь. Если я хочу быстро перемещаться между изображениями в компоненте, мне нужно подождать image_count*each_image_slideDuration. Можно ли игнорировать анимацию слайдаDuration (не удалять ее), поэтому, если пользователь хочет быстро перемещаться между изображениями, ему не нужно ждать, когда анимация закончится, чтобы одно изображение перешло в другое.
Теперь я могу справиться с завершением и запуском анимации, возможно, это поможет:
<ImageGallery
startIndex={this.state.currentFileIndex}
stopPropagation={false}
useBrowserFullscreen={false}
showThumbnails={showThumbnails && !isMobile && files.length > 1}
renderThumbInner={(data) => {
const { isVideo, original, thumbnail } = data;
if (!isVideo || thumbnail) {
return (
<div className="image-gallery-thumbnail-inner">
<img
className="image-gallery-thumbnail-image"
src={thumbnail || original}
alt={SeoConfig(pp, ATTRIBUTE.alt)}
title={SeoConfig(pp, ATTRIBUTE.imgTitle)}
loading="lazy"
height="56"
/>
</div>
);
}
return (
<div className="image-gallery-thumbnail-inner">
<video width="128" height="98">
<source src={original} type="video/webm" />
<source src={original} type="video/mp4" />
</video>
</div>
);
}}
items={files}
onSlide={(currentIndex) => {
this.handleFileSwitch(currentIndex);
console.log(`Animation ${this.imageGallery.slideDuration}ms`);
setTimeout(() => {
console.log('Animation is done');
}, this.imageGallery.slideDuration);
}}
onBeforeSlide={() => {
console.log('Animation started');
}}
disableSwipe={isMobile && isPanorama}
slideInterval={2000}
slideDuration={380}
onScreenChange={this.toggleFullScreen}
showNav={!isMobile || (isMobile && isPanorama)}
onClick={this.handleFullScreen}
ref={(ref) => {
this.imageGallery = ref;
}}
/>
Игнорировать анимацию я хочу и на мобильном телефоне (при свайпе), и при скольжении со стрелками (showNav props)