update: banner & vision-mission

components/landing/banner.tsx

@@ -14,7 +14,7 @@ export default function Banner() {
     ``
     return (
         <div className='flex flex-wrap'>
-            <div className='h-auto max-w-full relative'>
+            <div className='h-auto w-full relative'>
                 <img src="/banner2.png" width={'100%'} height={'100%'} />
             </div>
         </div>

components/landing/visi-misi.tsx

@@ -3,36 +3,51 @@
 // import "slick-carousel/slick/slick.css";
 // import "slick-carousel/slick/slick-theme.css";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { FreeMode, Pagination } from "swiper/modules";
+import { FreeMode, Pagination, Navigation } from "swiper/modules";
 
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/free-mode";
 
 import Image from "next/image";
-
-const images = [
-    {
-        id: 1,
-        url: "/vm1.jpg",
-        title: "Image 1",
-        description: "Description of image 1"
-    },
-    {
-        id: 2,
-        url: "/vm2.jpg",
-        title: "Image 2",
-        description: "Description of image 2"
-    },
-    {
-        id: 3,
-        url: "/vm3.jpg",
-        title: "Image 3",
-        description: "Description of image 3"
-    }
-];
+import { useCallback, useRef } from "react";
 
 export default function VisiMisi() {
+    
+    const sliderRef = useRef(null);
+
+    const images = [
+        {
+            id: 1,
+            url: "/vm1.jpg",
+            title: "Image 1",
+            description: "Description of image 1"
+        },
+        {
+            id: 2,
+            url: "/vm2.jpg",
+            title: "Image 2",
+            description: "Description of image 2"
+        },
+        {
+            id: 3,
+            url: "/vm3.jpg",
+            title: "Image 3",
+            description: "Description of image 3"
+        }
+    ];
+
+    const handlePrev = useCallback(() => {
+        if (!sliderRef.current) return;
+        sliderRef.current.swiper.slidePrev();
+    }, []);
+
+    const handleNext = useCallback(() => {
+        if (!sliderRef.current) return;
+        sliderRef.current.swiper.slideNext();
+    }, []);
+
+
     return (
         <div className='flex flex-wrap lg:m-10 m-5'>
             <div className="flex-none lg:w-1/4 w-full">
@@ -83,8 +98,8 @@ export default function VisiMisi() {
                             </CardBody>
                         </Card>
                     </div> */}
-                    <div className="flex items-center justify-center mt-6 lg:mt-44">
-                        <Swiper
+                    <div className="flex items-center justify-center lg:ml-10 mt-6 lg:mt-44">
+                        <Swiper ref={sliderRef}
                             breakpoints={{
                                 450: {
                                     slidesPerView: 1,
@@ -100,10 +115,8 @@ export default function VisiMisi() {
                                 },
                             }}
                             freeMode={true}
-                            pagination={{
-                                clickable: true,
-                            }}
-                            modules={[FreeMode, Pagination]}
+                            navigation={true}
+                            modules={[FreeMode, Navigation]}
                             className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
                         >
                             {images.map((item) => (
@@ -132,6 +145,10 @@ export default function VisiMisi() {
                             ))}
                         </Swiper>
                     </div>
+                    <div className="swiper-navigation flex flex-wrap justify-center z-50 mt-[-50px] absolute left-0 lg:left-[28%] right-0 m-auto">
+                        <div className="prev-arrow mr-3 border-1 border-indigo-500/75 rounded-md px-3" onClick={handlePrev} role="button">Prev</div>
+                        <div className="next-arrow border-1 border-indigo-500/75 rounded-md px-3" onClick={handleNext} role="button">Next</div>
+                    </div>
                 </div>
             </div>
         </div>