= ({ visible, length, currentIdx, onClickBullets }: Props) => {
return (
-
- {Array.from(Array(length).keys()).map((idx: number) => (
-
+ <>
+ {visible && length > 0 && (
+
+ {Array.from(Array(length).keys()).map((idx: number) => (
+
+ )}
+
);
};
diff --git a/src/ImageSliderNavigation.tsx b/src/ImageSliderNavigation.tsx
index 56de2d6..21099a5 100644
--- a/src/ImageSliderNavigation.tsx
+++ b/src/ImageSliderNavigation.tsx
@@ -14,10 +14,11 @@ export enum ImageSliderNavDirection {
}
type ImageSliderNavigationProps = {
- navStyle: ImageSliderNavStyle;
- navSize: number;
- navMargin: number;
+ type: ImageSliderNavStyle;
+ size: number;
+ margin: number;
direction: ImageSliderNavDirection;
+ visible: boolean;
onClickNav: (direction: ImageSliderNavDirection) => (event: React.SyntheticEvent) => void;
};
@@ -26,13 +27,17 @@ const altNavArrowRight = 'slide to right';
const ImageSliderNavigation: React.FC = (props: ImageSliderNavigationProps) => {
return (
-
+ <>
+ {props.visible && (
+
+ )}
+
);
};
diff --git a/src/hooks/useAutoPlay.ts b/src/hooks/useAutoPlay.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/hooks/useSlideIndex.ts b/src/hooks/useSlideIndex.ts
new file mode 100644
index 0000000..dca9fab
--- /dev/null
+++ b/src/hooks/useSlideIndex.ts
@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
+
+type UseSlideIndexParam = {
+ imageCount: number;
+ startIndex: number;
+ autoPlay: boolean;
+ autoPlayDelay: number;
+};
+
+type UseSlideIndexValue = {
+ slideIdx: number;
+ updateSlideIdx: (idx: number) => void;
+ getNextLoopingIdx: (idx: number) => number;
+ isRightDirection: boolean;
+ previousSlideIdx: number;
+};
+
+const useSlideIndex = ({ startIndex, imageCount, autoPlay, autoPlayDelay }: UseSlideIndexParam): UseSlideIndexValue => {
+ const [slideIdx, setSlideIdx] = useState(startIndex < imageCount ? startIndex : 0);
+ const isRightDirectionRef = useRef(true);
+ const previousSlideIdxRef = useRef(slideIdx);
+ const autoPlayTimerRef = useRef(null);
+
+ const setAutoPlayTimeout = (idx: number) => {
+ if (!autoPlay || autoPlayTimerRef.current) {
+ return;
+ }
+ autoPlayTimerRef.current = setTimeout(() => {
+ updateSlideIdx(idx);
+ }, autoPlayDelay * 1000);
+ };
+
+ const removeAutoPlayTimeout = () => {
+ if (autoPlayTimerRef.current !== null) {
+ clearTimeout(autoPlayTimerRef.current);
+ autoPlayTimerRef.current = null;
+ }
+ };
+
+ const getNextLoopingIdx = (idx: number) => {
+ if (idx >= imageCount) {
+ return 0;
+ } else if (idx < 0) {
+ return imageCount - 1;
+ }
+
+ return idx;
+ };
+
+ const updateSlideIdx = (idx: number) => {
+ isRightDirectionRef.current = idx > slideIdx;
+ previousSlideIdxRef.current = slideIdx;
+ setSlideIdx(getNextLoopingIdx(idx));
+ };
+
+ useEffect(() => {
+ removeAutoPlayTimeout();
+ setAutoPlayTimeout(slideIdx + 1);
+ return removeAutoPlayTimeout;
+ }, [slideIdx]);
+
+ return {
+ slideIdx,
+ updateSlideIdx,
+ getNextLoopingIdx,
+ isRightDirection: isRightDirectionRef.current,
+ previousSlideIdx: previousSlideIdxRef.current
+ };
+};
+
+export default useSlideIndex;