react-slide

package.json

@@ -22,12 +22,15 @@
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-slick": "^0.23.13",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.15",

src/app/components/Carousel/Carousel.module.scss

@@ -0,0 +1,11 @@
+.sliderContainer {
+  h3 {
+    font-size: 36px;
+    margin: 10px;
+    padding: 2% 0;
+    background: var(--ifm-color-primary);
+    color: #fff;
+    line-height: 100px;
+    text-align: center;
+  }
+}

src/app/components/Carousel/Carousel.tsx

@@ -0,0 +1,53 @@
+'use client';
+import Slider from 'react-slick';
+import styles from './Carousel.module.scss';
+import { basePath } from '../../utils/constants';
+import Image from 'next/image';
+
+export default function SimpleSlider() {
+  const images = [
+    `${basePath}/images/placeholder-carousel-numbered-1.png`,
+    `${basePath}/images/placeholder-carousel-numbered-2.png`,
+    `${basePath}/images/placeholder-carousel-numbered-3.png`,
+    `${basePath}/images/placeholder-carousel-numbered-4.png`,
+    `${basePath}/images/placeholder-carousel-numbered-5.png`,
+    `${basePath}/images/placeholder-carousel-numbered-6.png`,
+    `${basePath}/images/placeholder-carousel-numbered-7.png`,
+    `${basePath}/images/placeholder-carousel-numbered-1.png`,
+    `${basePath}/images/placeholder-carousel-numbered-2.png`,
+    `${basePath}/images/placeholder-carousel-numbered-3.png`,
+    `${basePath}/images/placeholder-carousel-numbered-4.png`,
+    `${basePath}/images/placeholder-carousel-numbered-5.png`,
+    `${basePath}/images/placeholder-carousel-numbered-6.png`,
+    `${basePath}/images/placeholder-carousel-numbered-7.png`,
+  ];
+
+  const settings = {
+    infinite: true,
+    speed: 15000, // Adjust speed to make it constant
+    slidesToShow: 7, // Number of visible slides
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 0, // Continuous without pause
+    cssEase: 'linear', // For smooth, continuous movement
+    pauseOnHover: false,
+  };
+
+  return (
+    <div className={styles.sliderContainer}>
+      <Slider {...settings}>
+        {images.map((src, index) => (
+          <div key={index}>
+            <Image
+              src={src}
+              alt={`Slide ${index + 1}`}
+              width={160}
+              height={100}
+              draggable={false}
+            />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+}

src/app/components/ContentContainer/ContentContainer.tsx

@@ -4,15 +4,17 @@ import classNames from 'classnames';
 interface ContentContainerProps {
   children: React.ReactNode;
   align?: boolean;
+  classes?: string;
 }
 export function ContentContainer({
   children,
   align = false,
+  classes = 'px-14 py20',
 }: ContentContainerProps) {
   return (
     <section>
       <GridContainer
-        className={classNames('px-14 py-20', {
+        className={classNames(classes, {
           'px-32': !align,
         })}
       >