diff --git a/src/components/Body/Body.jsx b/src/components/Body/Body.jsx
index 93bedc4..b80f914 100644
--- a/src/components/Body/Body.jsx
+++ b/src/components/Body/Body.jsx
@@ -62,7 +62,11 @@ const Body = () => {
}, [data.fullscreenPhotoId]);
const handleRotationRight = () => {
- handleClick(photosList[fullscreenIndex + 1].id);
+ let newIndex = fullscreenIndex + 1;
+ if (newIndex >= photosList.length) {
+ newIndex = 0;
+ }
+ handleClick(photosList[newIndex].id);
};
const handleRotationLeft = () => {
diff --git a/src/components/Body/MyModal.jsx b/src/components/Body/MyModal.jsx
index c698893..5fde4c7 100644
--- a/src/components/Body/MyModal.jsx
+++ b/src/components/Body/MyModal.jsx
@@ -23,7 +23,7 @@ const MyModal = ({
return (
{isSlideShow
- ?
+ ?
: }
diff --git a/src/components/Body/Slideshow.jsx b/src/components/Body/Slideshow.jsx
index f657d18..2af4896 100644
--- a/src/components/Body/Slideshow.jsx
+++ b/src/components/Body/Slideshow.jsx
@@ -1,39 +1,19 @@
import React from "react";
-import { useAppContext } from "../AppContext";
-
import Control from "./Control";
import "../../styles/Body.css";
-const Slideshow = ({ photo, handleRotationRight, rightArrow }) => {
- const timeoutRef = React.useRef(null);
-
- const { setIsSlideShow } = useAppContext();
-
- function resetTimeout() {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
- }
-
+const Slideshow = ({ photo, handleRotationRight }) => {
React.useEffect(() => {
- resetTimeout();
- timeoutRef.current = setTimeout(
- () => {
- if (rightArrow) {
- handleRotationRight();
- } else {
- setIsSlideShow(false);
- }
- },
- 3000
- );
+ const interval = setInterval(() => {
+ handleRotationRight();
+ }, 3000);
return () => {
- resetTimeout();
+ clearInterval(interval);
};
- }, [photo]);
+ }, [handleRotationRight]);
return (
diff --git a/src/styles/theme-variables.css b/src/styles/theme-variables.css
index 86f3ff4..df5bf32 100644
--- a/src/styles/theme-variables.css
+++ b/src/styles/theme-variables.css
@@ -2,7 +2,7 @@
--mainBGColor: #1A1A1A;
--mainColor: white;
--additionalColor: #8A8A8A;
- --opacityBGColor: rgba(27, 27, 27, 0.5);
+ --opacityBGColor: #000000;
--additionalBGColor: #2E2E2E;
--colorRectangle: yellow;
--borderRectangle: yellow;