Merge pull request #81 from sp9324/master

added slider for games

Author: ken1000minus7

package-lock.json

@@ -15,6 +15,8 @@
     "react-router": "^6.17.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -5,6 +5,9 @@ import {Games} from "./pages/Games";
 import {Activities} from "./pages/Activities";
 import {activities, games} from "./data/content";
 import {Navbar} from './components/common/Navbar';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
 
 function App() {
     return (

src/App.js

@@ -10,9 +10,14 @@ const CardItem = (props) => {
     height: '100%',
   };
 
+  const cardStyle = {
+    width: '500px', 
+    margin: '20px'
+  };
+
   return (
     <div className="col-md-4 col-sm-6 mb-4">
-      <div class="card container-fluid">
+      <div class="card container-fluid" style={cardStyle}>
         <div className="card-image">
           <img
             className="card-img-top"

src/components/Home/CardItem.js

@@ -1,16 +1,42 @@
 import React from 'react'
 import CardItem from '../../components/Home/CardItem'
-// import "../../styles/pages/Home/Cards.css"
+import Slider from 'react-slick';
+import "../../styles/pages/Home/Cards.css"
 import Wordle from "../../assets/games/Wordle/wordlejpg.png"
 import flagGame from "../../assets/games/flag guess/flagger.png"
 import magicSquare from "../../assets/numberblocks.png"
 
 const Cards = () => {
-    return (
+    // Slick settings for the carousel
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 3,  // Number of cards to show at once
+        slidesToScroll: 1,
+        responsive: [
+            {
+                breakpoint: 1024,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                    infinite: true,
+                    dots: true
+                }
+            },
+            {
+                breakpoint: 600,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                }
+            }
+        ]
+    };
 
+    return (
         <div className='container'>
-            <div className='row justify-content-center'>
-
+            <Slider {...settings}>
                 <CardItem
                     src={Wordle}
                     text="Wordle Game"
@@ -59,8 +85,7 @@ const Cards = () => {
                     label="Search Words"
                     path='/activities/search-any-word'
                     title='Search Words' />
-
-            </div>
+            </Slider>
         </div>
     )
 }

src/pages/home/Cards.js

@@ -1,13 +1,13 @@
 .card-image{
-    width: 100%;
+    width: 266px;
     height: 35vh; 
     display: flex;
     justify-content: center;
     overflow: hidden;
     /* padding: 0 !important; */
 }
 .card-body{
-    width: 100%;
+    width: 266px;
     height: 22vh; 
     display: flex;
     flex-direction: column;