Merge branch 'carousel-changes' into 'main'

Carousel changes

See merge request !2

theme-costume-app/src/Charts.js

 import React from 'react';
 import Carousel from './components/Carousel';
-import halloweenImg from './assets/Halloween.jpg'
+import halloweenImg from './assets/halloween3.jpg'
 import christmasImg from './assets/christmas.jpg'
 import collegeImg from './assets/college.webp'
 import MyCarousel from './components/MyCarousel';

theme-costume-app/src/components/Carousel.js

@@ -21,27 +21,44 @@ const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, tota
   };
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>{renderDots()}</div>
-      <button onClick={goToPreviousPage}>&lt;</button>
-      <button onClick={goToNextPage}>&gt;</button>
+    <div style={styles.navigation}>
+      <button onClick={goToPreviousPage} style={styles.navButton}>&lt;</button>
+      <div style={styles.dotsContainer}>{renderDots()}</div>
+      <button onClick={goToNextPage} style={styles.navButton}>&gt;</button>
     </div>
   );
 };
 
-const MoviesDisplay = ({ setOfMovies }) => {
+const MoviesDisplay = ({ setOfMovies, goToNextPage, goToPreviousPage, currentPage, totalPages }) => {
   return (
-    <div style={styles.movies}>
-      {setOfMovies.map((movie, index) => (
-      <div key={index} style={styles.movie}>
-          <img src={movie.source} alt={movie.name} style={styles.image} />
-          {/* <p style={styles.movieText}>{movie.name}</p> */}
-        </div>
-      ))}
+    <div style={styles.moviesContainer}>
+      <div style={styles.movies}>
+        {setOfMovies.map((movie, index) => (
+          <div key={index} style={styles.movie}>
+            <img src={movie.source} alt={movie.name} style={styles.image} />
+          </div>
+        ))}
+      </div>
+      <div style={styles.dotsContainer}>
+        {[...Array(totalPages)].map((_, index) => (
+          <span
+            key={index}
+            style={{
+              ...styles.dot,
+              backgroundColor: index + 1 === currentPage ? 'black' : 'gray',
+            }}
+          />
+        ))}
+      </div>
+      <div style={styles.navLeft}>
+        <button onClick={goToPreviousPage} style={styles.navButton}>&lt;</button>
+      </div>
+      <div style={styles.navRight}>
+        <button onClick={goToNextPage} style={styles.navButton}>&gt;</button>
+      </div>
     </div>
   );
 };
-
 const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const TOTAL_PAGES = Math.ceil(items.length / showingItems);
@@ -52,21 +69,13 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   }, [currentPage]);
 
   const previousPage = () => {
-    if (currentPage === 1) {
-      setCurrentPage(TOTAL_PAGES);
-    } else {
-      setCurrentPage(currentPage - 1);
-    }
+    setCurrentPage((prevPage) => (prevPage === 1 ? TOTAL_PAGES : prevPage - 1));
   };
 
   const nextPage = () => {
-    if (currentPage === TOTAL_PAGES) {
-      setCurrentPage(1);
-    } else {
-      setCurrentPage(currentPage + 1);
-    }
+    setCurrentPage((prevPage) => (prevPage === TOTAL_PAGES ? 1 : prevPage + 1));
   };
-  
+
   const groupingMovies = [];
   for (let i = 0; i < items.length; i += showingItems) {
     groupingMovies.push(items.slice(i, i + showingItems));
@@ -75,26 +84,49 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   return (
     <div style={styles.container}>
       <div style={styles.topRow}>
-        <h3>Teman</h3>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <NavigationComponent
-            goToPreviousPage={previousPage}
-            goToNextPage={nextPage}
-            totalPages={TOTAL_PAGES}
-            currentPage={currentPage}
-          />
+        <h3 style={styles.title}>Teman</h3>
+      </div>
+      <div style={styles.sliderContainer}>
+        <div
+          style={{
+            ...styles.slider,
+            transform: `translateX(-${(currentPage - 1) * 100}%)`,
+          }}
+        >
+          {groupingMovies.map((group, index) => (
+            <div key={index} style={styles.page}>
+              <MoviesDisplay
+                setOfMovies={group}
+                goToNextPage={nextPage}
+                goToPreviousPage={previousPage}
+                currentPage={currentPage}
+                totalPages={TOTAL_PAGES}
+              />
+            </div>
+          ))}
+        </div>
+        <div style={styles.dotsContainer}>
+          {[...Array(TOTAL_PAGES)].map((_, index) => (
+            <span
+              key={index}
+              style={{
+                ...styles.dot,
+                backgroundColor: index + 1 === currentPage ? 'black' : 'gray',
+              }}
+            />
+          ))}
         </div>
       </div>
-      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]}
-      />
     </div>
   );
 };
 
+
 const styles = {
   container: {
     backgroundColor: '#fff',
     width: '100%',
+    position: 'relative',
   },
   topRow: {
     display: 'flex',
@@ -104,26 +136,73 @@ const styles = {
     width: '100%',
     backgroundColor: 'white',
     alignItems: 'center',
+    position: 'relative',
+  },
+  sliderContainer: {
+    overflow: 'hidden',
+    width: '100%',
+    position: 'relative',
+  },
+  slider: {
+    display: 'flex',
+    transition: 'transform 0.5s ease-in-out',
+    width: '100%',
+  },
+  page: {
+    //display: 'flex',
+    width: '100%',
+    minWidth: '100%',
+    boxSizing: 'border-box',
+    position: 'relative',
+ 
+  },
+  moviesContainer: {
+    position: 'relative',
   },
   movies: {
     display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
     justifyContent: 'center',
     width: '100%',
   },
+  movie: {
+    flex: 1,
+    margin: '0 5px',
+  },
   image: {
     width: '100%',
+    height: '350px', // This ensures the aspect ratio is maintained
     borderRadius: 10,
   },
-  movie: {
-    flex: '1 0 30%', // Adjust the width based on the number of items per row
-    textAlign: 'center',
+  navigation: {
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    transform: 'translateY(-50%)',
+    zIndex: 1, // Ensure navigation buttons are above images
   },
-  movieText: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
+  navButton: {
+    background: 'rgba(0, 0, 0, 0.5)',
+    color: 'white',
+    border: 'none',
+    padding: '10px',
+    cursor: 'pointer',
+  },
+  dotsContainer: {
+    height: '10px',
+  },
+  navLeft: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  navRight: {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
   },
 };