implemented project slider buttons and slide indication.

src/Projects.jsx

@@ -1,28 +1,57 @@
-import React from "react";
+import React, { useRef } from "react";
 import ProjectCard from "./components/ProjectCard";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { Mousewheel, Scrollbar, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
+import { Navigation, Scrollbar } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/effect-cards";
 import "swiper/css/scrollbar";
 
 export default function Projects({ cardData }) {
+  const projectSwiperRef = useRef(null);
+
+  const prevSlide = () => {
+    if (projectSwiperRef.current) {
+      projectSwiperRef.current.swiper.slidePrev();
+    }
+  };
+
+  const nextSlide = () => {
+    if (projectSwiperRef.current) {
+      projectSwiperRef.current.swiper.slideNext();
+    }
+  };
+
   return (
     <>
       <div id="project-section">
         <div id="project-grid-container">
+          <div id="projects-header-row">
             <h1>Projects</h1>
+            <div id="projects-nav-buttons">
+              <div className="slider-nav-button shadow tooltip" onClick={prevSlide}>
+                <span className="material-icons">
+                  chevron_left
+                </span>
+                <span className="tooltip-text">Previous Project</span>
+              </div>
+
+              <div className="slider-nav-button shadow tooltip" onClick={nextSlide}>
+                <span className="material-icons">
+                  chevron_right
+                </span>
+                <span className="tooltip-text">Next Project</span>
+              </div>
+            </div>
+          </div>
           <Swiper
-            modules={[Scrollbar, Mousewheel, Pagination]}
-            slidesPerView={1}
+            modules={[Navigation, Scrollbar]}
+            navigation
+            slidesPerView={1.2}
             loop={false}
             id="project-cards-section"
             className="mySwiper"
-            mousewheel={{
-              thresholdDelta: 50,
-              sensitivity: 1,
-            }}
             scrollbar={{ hide: false, el: ".swiper-slide" }}
+            ref={projectSwiperRef}
           >
             {cardData.map((c, index) => (
               <SwiperSlide key={index}>
@@ -38,7 +67,7 @@ export default function Projects({ cardData }) {
             ))}
           </Swiper>
         </div>
-      </div>
+      </div >
     </>
   );
 }

src/main.css

@@ -319,6 +319,28 @@ p {
   grid-template-rows: 20% 80%;
 }
 
+#projects-header-row {
+  display: flex;
+}
+
+#projects-nav-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: right;
+  width: 100%;
+  margin-right: 5vw;
+}
+
+.slider-nav-button {
+  margin: 2vw;
+  transition-duration: 500ms;
+}
+
+#projects-header-row div span {
+  color: var(--accent-2);
+}
+
 #project-grid-container h1 {
   margin-left: 5vw;
   text-align: left;
@@ -330,6 +352,26 @@ p {
   justify-content: center;
 }
 
+/* Tooltip container */
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: var(--dark-0);
+  color: var(--text);
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+}
+
 /**PROJECT CARDS**/
 .project-card {
   display: grid;