diff --git a/theme-costume-app/package-lock.json b/theme-costume-app/package-lock.json
index a14f687f725fd77f4184a81318f047560a1c2123..8e87805ebbfd48e5bcee934ee197d81df7f0c471 100644
--- a/theme-costume-app/package-lock.json
+++ b/theme-costume-app/package-lock.json
@@ -19,6 +19,8 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
+ "react-slick": "^0.30.2",
+ "slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
}
},
@@ -6596,6 +6598,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
},
+ "node_modules/classnames": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+ "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+ },
"node_modules/clean-css": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -7804,6 +7811,11 @@
"node": ">=10.13.0"
}
},
+ "node_modules/enquire.js": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+ "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+ },
"node_modules/entities": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -12674,6 +12686,12 @@
"jiti": "bin/jiti.js"
}
},
+ "node_modules/jquery": {
+ "version": "3.7.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+ "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+ "peer": true
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12772,6 +12790,14 @@
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
},
+ "node_modules/json2mq": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+ "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+ "dependencies": {
+ "string-convert": "^0.2.0"
+ }
+ },
"node_modules/json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -15722,6 +15748,22 @@
}
}
},
+ "node_modules/react-slick": {
+ "version": "0.30.2",
+ "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+ "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+ "dependencies": {
+ "classnames": "^2.2.5",
+ "enquire.js": "^2.1.6",
+ "json2mq": "^0.2.0",
+ "lodash.debounce": "^4.0.8",
+ "resize-observer-polyfill": "^1.5.0"
+ },
+ "peerDependencies": {
+ "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -15939,6 +15981,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
+ "node_modules/resize-observer-polyfill": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+ },
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -16582,6 +16629,14 @@
"node": ">=8"
}
},
+ "node_modules/slick-carousel": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+ "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+ "peerDependencies": {
+ "jquery": ">=1.8.0"
+ }
+ },
"node_modules/sockjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -16839,6 +16894,11 @@
"safe-buffer": "~5.2.0"
}
},
+ "node_modules/string-convert": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+ "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+ },
"node_modules/string-length": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
diff --git a/theme-costume-app/package.json b/theme-costume-app/package.json
index e16b97c644c6acd6ba5e7209fa1a542906a0dbfe..9ddf58fb460e68d50f01f9018eb1910eeae3a0f3 100644
--- a/theme-costume-app/package.json
+++ b/theme-costume-app/package.json
@@ -14,6 +14,8 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
+ "react-slick": "^0.30.2",
+ "slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/theme-costume-app/src/Home.js b/theme-costume-app/src/Home.js
index b1b2a66e06734a133264aea36747f4e49bef19a3..552e76c4e6f70114363b6c2841fbff2bb661b6a8 100644
--- a/theme-costume-app/src/Home.js
+++ b/theme-costume-app/src/Home.js
@@ -3,6 +3,7 @@ import Carousel from './components/Carousel';
import halloweenImg from './assets/Halloween.jpg'
import footballImg from './assets/Halloween.jpg'
import collegeImg from './assets/Halloween.jpg'
+import MyCarousel from './components/MyCarousel';
const themeCategoryImg = [
{
name: 'Halloween',
@@ -21,7 +22,8 @@ const themeCategoryImg = [
const Home = () => {
return (
<div>
- <Carousel showingItems={1} items={themeCategoryImg}/>
+ {/* <Carousel showingItems={1} items={themeCategoryImg}/> */}
+ <MyCarousel />
<h2>Home Page</h2>
<p>Welcome to the Home page!</p>
</div>
diff --git a/theme-costume-app/src/assets/Halloween.jpg b/theme-costume-app/src/assets/Halloween.jpg
index b25c2da47a23954aa754cb83520296f9f68d52b7..6cd8296448887b52b05f43a2d166c0eec2124d17 100644
Binary files a/theme-costume-app/src/assets/Halloween.jpg and b/theme-costume-app/src/assets/Halloween.jpg differ
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
index 1d04483ee50b7125912f381debf18190bebc21bc..77ff0d15606ba462a5ef507b57a5b625acba677f 100644
--- a/theme-costume-app/src/components/Carousel.js
+++ b/theme-costume-app/src/components/Carousel.js
@@ -35,7 +35,7 @@ const MoviesDisplay = ({ setOfMovies }) => {
{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>
+ {/* <p style={styles.movieText}>{movie.name}</p> */}
</div>
))}
</div>
@@ -88,12 +88,13 @@ const Carousel = ({ showingItems, items }) => {
const styles = {
container: {
backgroundColor: '#fff',
- width: '95%',
+ width: '100vw',
},
topRow: {
display: 'flex',
+ boxSizing: 'border-box',
justifyContent: 'space-between',
- padding: 8,
+ padding: 10,
width: '100%',
backgroundColor: 'white',
alignItems: 'center',
@@ -106,14 +107,11 @@ const styles = {
width: '100%',
},
image: {
- margin: '0 5px',
- width: '100vw',
- height: 150,
+ width: '100%',
borderRadius: 10,
},
movie: {
flex: '1 0 30%', // Adjust the width based on the number of items per row
- margin: 10,
textAlign: 'center',
},
movieText: {
diff --git a/theme-costume-app/src/components/Halloween.jpg b/theme-costume-app/src/components/Halloween.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6cd8296448887b52b05f43a2d166c0eec2124d17
Binary files /dev/null and b/theme-costume-app/src/components/Halloween.jpg differ
diff --git a/theme-costume-app/src/components/MyCarousel.js b/theme-costume-app/src/components/MyCarousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..b411f50b4765f0310912d49f66f54565eefbc1b4
--- /dev/null
+++ b/theme-costume-app/src/components/MyCarousel.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import {Box} from '@mui/material'
+import testImg from './Halloween.jpg';
+
+
+const MyCarousel = () => {
+ const settings = {
+ dots: false,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ // responsive: [
+ // {
+ // breakpoint: 1024,
+ // settings: {
+ // slidesToShow: 1,
+ // slidesToScroll: 1,
+ // infinite: true,
+ // dots: true
+ // }
+ // },
+ // {
+ // breakpoint: 768,
+ // settings: {
+ // slidesToShow: 1,
+ // slidesToScroll: 1,
+ // initialSlide: 1
+ // }
+ // }
+ // ]
+ };
+
+ return (
+ <Slider {...settings}>
+ <div>
+ <h3>Slide 1</h3>
+ <img src={testImg} alt='din morsa' width='100%' />
+ </div>
+ <div>
+ <h3>Slide 2</h3>
+ </div>
+ <div>
+ <h3>Slide 3</h3>
+ </div>
+ </Slider>
+ );
+};
+
+export default MyCarousel;