feat: add a carousel to the landing page

package-lock.json

@@ -47,6 +47,7 @@
         "rehype-react": "^7.1.1",
         "rehype-slug": "^5.0.1",
         "sharp": "^0.32.6",
+        "swiper": "^11.1.9",
         "tailwindcss": "^3.1.6",
         "typescript": "^5.2.2",
         "unified": "^10.1.2",
@@ -24428,6 +24429,25 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.9",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.9.tgz",
+      "integrity": "sha512-rflu8zvfGa3x1v/aeSufk4zRJffhOQowyvtJlp46sUBnOqAuk1Rdv5Ldj0AWWBV595iZ+ZMk7VB35ZRtRUomtA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/syntax-error": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.4.0.tgz",

package.json

@@ -63,6 +63,7 @@
     "rehype-react": "^7.1.1",
     "rehype-slug": "^5.0.1",
     "sharp": "^0.32.6",
+    "swiper": "^11.1.9",
     "tailwindcss": "^3.1.6",
     "typescript": "^5.2.2",
     "unified": "^10.1.2",

src/components/Carousel.js

@@ -0,0 +1,43 @@
+import React, { Children } from 'react';
+import { Navigation, Autoplay, A11y } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+const Carousel = ({ children }) => {
+  return (
+    <Swiper
+      modules={[Navigation, Autoplay, A11y]}
+      navigation={{
+        nextEl: '.swiper-button-next-custom',
+        prevEl: '.swiper-button-prev-custom',
+      }}
+      loop={true}
+      autoplay={{
+        delay: 3000,
+      }}
+      a11y={{
+        containerMessage:
+          'This is a swiper containing multiple images and videos about the book',
+      }}
+      spaceBetween={50}
+      slidesPerView={1}
+    >
+      {Children.toArray(children).map((child) => (
+        <SwiperSlide key={child.key}>{child}</SwiperSlide>
+      ))}
+
+      {/* Custom Navigation Buttons */}
+      <div className="swiper-button-prev-custom absolute left-0 top-1/2 z-10 mx-2 -translate-y-1/2 p-2 text-noc-400">
+        <FiChevronLeft className="h-8 w-8" />
+      </div>
+      <div className="swiper-button-next-custom absolute right-0 top-1/2 z-10 mx-2 -translate-y-1/2 p-2 text-noc-400">
+        <FiChevronRight className="h-8 w-8" />
+      </div>
+    </Swiper>
+  );
+};
+
+export default Carousel;

src/pages/index.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
 
+import Carousel from '../components/Carousel';
 import SideNavLayout from '../layouts/SideNavLayout';
 import PurchaseButtons, {
   PurchaseDirectButton,
@@ -25,11 +26,18 @@ const links = [
 export default function IndexPage() {
   return (
     <SideNavLayout>
-      <StaticImage
-        src="../images/cover.png"
-        width={1200}
-        alt="nature of code book cover"
-      />
+      <Carousel>
+        <StaticImage
+          src="../images/cover.png"
+          width={1200}
+          alt="nature of code book cover"
+        />
+        <StaticImage
+          src="../images/cover.png"
+          width={1200}
+          alt="nature of code book cover"
+        />
+      </Carousel>
 
       <PurchaseButtons className="my-6 lg:hidden" aligned="left" />