added more pictures and navigation on carousel

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/halloween3Y.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,21 +21,40 @@ const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, tota
   };
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <button onClick={goToPreviousPage} style={{ marginRight: 10 }}>&lt;</button>
       <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>{renderDots()}</div>
-      <button onClick={goToPreviousPage}>&lt;</button>
       <button onClick={goToNextPage}>&gt;</button>
     </div>
   );
 };
 
-const MoviesDisplay = ({ setOfMovies }) => {
+const MoviesDisplay = ({ setOfMovies, goToPreviousPage, goToNextPage, currentPage, totalPages }) => {
   return (
-    <div style={styles.movies}>
+<div style={styles.movies}>
       {setOfMovies.map((movie, index) => (
-      <div key={index} style={styles.movie}>
+        <div key={index} style={styles.movie}>
           <img src={movie.source} alt={movie.name} style={styles.image} />
-          {/* <p style={styles.movieText}>{movie.name}</p> */}
+          <div style={styles.navigationContainer}>
+            <div style={styles.navigationButtons}>
+              <button style={styles.buttonLeft} onClick={goToPreviousPage}>&lt;</button>
+              <button style={styles.buttonRight} onClick={goToNextPage}>&gt;</button>
+            </div>
+            <div style={styles.navigationDots}>
+              {Array.from({ length: totalPages }, (_, i) => (
+                <span
+                  key={i}
+                  style={{
+                    fontSize: 20,
+                    margin: '0 2px',
+                    color: i === currentPage - 1 ? 'black' : 'gray',
+                  }}
+                >
+                  ●
+                </span>
+              ))}
+            </div>
+          </div>
         </div>
       ))}
     </div>
@@ -85,13 +104,19 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
           />
         </div>
       </div>
-      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]}
+      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]} 
+      goToPreviousPage={previousPage}
+      goToNextPage={nextPage}
+      currentPage={currentPage}
+      totalPages={TOTAL_PAGES}
       />
     </div>
   );
 };
 
 const styles = {
+
+  
   container: {
     backgroundColor: '#fff',
     width: '100%',
@@ -106,18 +131,16 @@ const styles = {
     alignItems: 'center',
   },
   movies: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    position: 'relative', // Added position relative
     width: '100%',
   },
   image: {
     width: '100%',
+    height: '350px',
     borderRadius: 10,
   },
   movie: {
-    flex: '1 0 30%', // Adjust the width based on the number of items per row
+    position: 'relative', // Added position relative
     textAlign: 'center',
   },
   movieText: {
@@ -125,6 +148,37 @@ const styles = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
+
+  navigationButtons: {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    right: 0,
+    transform: 'translateY(-50%)',
+  },
+  buttonLeft: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '8px',
+    cursor: 'pointer',
+  },
+  buttonRight: {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '8px',
+    cursor: 'pointer',
+  },
 };
 
+
 export default Carousel;