image carousel on product view

src/components/CarouselContainer/CarouselContainer.jsx

@@ -5,7 +5,6 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
 import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
 import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
-import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
 
 const CarouselContainer = () => {

src/components/ImageView/ImageView.jsx

@@ -9,7 +9,8 @@ import {
 } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 import CloseIcon from "@mui/icons-material/Close";
-import defaultImage from "../../assets/images/default.png"
+import defaultImage from "../../assets/images/default.png";
+import { Carousel } from 'react-responsive-carousel';
 
 // Utility function to check if an object is empty
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
@@ -20,6 +21,7 @@ const ImageView = () => {
 
   const [previewImage, setPreviewImage] = useState("");
   const [isZoomed, setIsZoomed] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
   useEffect(() => {
 
@@ -37,6 +39,10 @@ const ImageView = () => {
     setIsZoomed(!isZoomed);
   };
 
+  const handleSlideChange = (index) => {
+    setPreviewImage(product?.images[index]?.url)
+  };
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2}>
@@ -46,24 +52,32 @@ const ImageView = () => {
             sx={{
               overflow: "hidden",
               cursor: "pointer",
+              px: {
+                xs: 0,
+                sm: 0,
+                md: 15
+              }
             }}
-            onClick={handleZoomToggle}
           >
-            <Box
-              src={previewImage || defaultImage}
-              component="img"
-              alt="Preview"
-              sx={{
-                width: {
-                  xs: "100%",
-                  sm: "100%",
-                  md: "70%"
-                },
-                height: "auto",
-                display: "block",
-                margin: "auto auto"
-              }}
-            />
+
+            <Carousel showStatus={false} showIndicators={false} onClickItem={() => { handleZoomToggle() }} onChange={(index) => handleSlideChange(index)} selectedItem={currentIndex}>
+              {product?.images?.map(({ src, url }, index) => (
+                <Box
+                  key={index}
+                  component="img"
+                  src={url}
+                  alt={`img_${index + 1}`}
+                  sx={{
+                    width: "100%",
+                    zIndex: 0,
+                    position: "relative",
+                    top: "50%",
+                    transform: "translateY(-50%)"
+                  }}
+                />
+              ))}
+            </Carousel>
+
           </Box>
         </Grid>
 
@@ -87,10 +101,14 @@ const ImageView = () => {
             {product?.images?.map(({ src, url }, index) => (
               <IconButton
                 key={index}
-                onClick={() => handleThumbnailClick(url)}
+                onClick={() => {
+                  handleThumbnailClick(url)
+                  setCurrentIndex(index)
+                }}
                 sx={{
-                  borderRadius: 2,
-                  overflow: "hidden",
+                  p:0.4,
+                  borderRadius: 1,
+                  backgroundColor: (previewImage == url) ? "#95AAC5" : "none"
                 }}
               >
                 <img
@@ -111,16 +129,24 @@ const ImageView = () => {
 
       {/* Zoom Dialog */}
       <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
-        <DialogContent sx={{ position: "relative" }}>
-          <img
-            src={previewImage || defaultImage}
-            alt="Zoomed Preview"
-            style={{
-              width: "100%",
-              height: "auto",
+        <DialogContent
+          sx={{
+            position: "relative",
+            overflow: "hidden", // Prevent scrolling on DialogContent
+            height: "90vh", // Adjust height as needed
+          }}
+        >
+          {/* Fixed position close button */}
+          <Box
+            sx={{
+              width: 50,
+              height: 50,
+              position: "absolute",
+              top: 10,
+              right: 1.5,
+              zIndex: 2, // Ensure it stays above other content
             }}
-          />
-          <Box sx={{ width: 50, height: 50, position: "absolute", top: 10, right: 10 }}>
+          >
             <IconButton
               onClick={handleZoomToggle}
               sx={{
@@ -134,8 +160,26 @@ const ImageView = () => {
               <CloseIcon />
             </IconButton>
           </Box>
+
+          {/* Scrollable content */}
+          <Box
+            sx={{
+              overflow: "auto", // Allow scrolling within this Box
+              height: "100%", // Fill available height of DialogContent
+            }}
+          >
+            <img
+              src={previewImage || defaultImage}
+              alt="Zoomed Preview"
+              style={{
+                width: "100%",
+                height: "auto",
+              }}
+            />
+          </Box>
         </DialogContent>
       </Dialog>
+
     </Box>
   );
 };

src/index.js

@@ -10,6 +10,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'animate.css';
+import "react-responsive-carousel/lib/styles/carousel.min.css";
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';