updated swiper next prex button issue

components/Collection/InnerBannerproduct.js

@@ -3,13 +3,13 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/pagination";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
-import SwiperBtn from "@/components/Layout/SwiperBtn";
 import { cleanImage } from "../services/imageHandling";
 import { cleanImage } from "../services/imageHandling";
 import Heading from "@/components/Heading";
 import Heading from "@/components/Heading";
 import Image from "next/image";
 import Image from "next/image";
-import React from "react";
+import React, { useRef } from "react";
 
 
 const InnerBannerproduct = ({ productData }) => {
 const InnerBannerproduct = ({ productData }) => {
+    const swiperRef = useRef(null);
 
 
     return (
     return (
         <>
         <>
@@ -18,17 +18,16 @@ const InnerBannerproduct = ({ productData }) => {
                     <div className="product-banner">
                     <div className="product-banner">
                         <div className="position-relative">
                         <div className="position-relative">
                             <Swiper
                             <Swiper
-                                navigation={{
-                                    nextEl: ".cust-swiper-button-next",
-                                    prevEl: ".cust-swiper-button-prev",
-                                }}
+                                slidesPerView={1}
+                                spaceBetween={0}
                                 pagination={{ clickable: true }}
                                 pagination={{ clickable: true }}
                                 autoplay={{ delay: 5000, disableOnInteraction: false }}
                                 autoplay={{ delay: 5000, disableOnInteraction: false }}
                                 loop={false}
                                 loop={false}
+                                onSwiper={(swiper) => { swiperRef.current = swiper; }}
                                 modules={[Navigation, Pagination, Autoplay]}
                                 modules={[Navigation, Pagination, Autoplay]}
                                 className="homeBannerSwiper"
                                 className="homeBannerSwiper"
                             >
                             >
-                                {productData?.image?.sort((a, b) => a.id - b.id)?.map((item, index) => (
+                                {productData?.image?.slice()?.sort((a, b) => a.id - b.id)?.map((item, index) => (
                                     <SwiperSlide key={index}>
                                     <SwiperSlide key={index}>
                                         <Image
                                         <Image
                                             width={1856}
                                             width={1856}
@@ -42,7 +41,22 @@ const InnerBannerproduct = ({ productData }) => {
                             {/* Navigation buttons outside Swiper - hidden if only 1 image */}
                             {/* Navigation buttons outside Swiper - hidden if only 1 image */}
                             {productData?.image?.length > 1 && (
                             {productData?.image?.length > 1 && (
                                 <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
                                 <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
-                                    <SwiperBtn />
+                                    <button
+                                        className="hm-swpr-btn"
+                                        onClick={() => swiperRef.current?.slidePrev()}
+                                    >
+                                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M14.9688 7C14.9688 7.5625 14.5312 8 14 8H4.40625L7.6875 11.3125C8.09375 11.6875 8.09375 12.3438 7.6875 12.7188C7.5 12.9062 7.25 13 7 13C6.71875 13 6.46875 12.9062 6.28125 12.7188L1.28125 7.71875C0.875 7.34375 0.875 6.6875 1.28125 6.3125L6.28125 1.3125C6.65625 0.90625 7.3125 0.90625 7.6875 1.3125C8.09375 1.6875 8.09375 2.34375 7.6875 2.71875L4.40625 6H14C14.5312 6 14.9688 6.46875 14.9688 7Z" fill="white" />
+                                        </svg>
+                                    </button>
+                                    <button
+                                        className="hm-swpr-btn"
+                                        onClick={() => swiperRef.current?.slideNext()}
+                                    >
+                                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M0.03125 7C0.03125 7.5625 0.46875 8 1 8H10.5938L7.3125 11.3125C6.90625 11.6875 6.90625 12.3438 7.3125 12.7188C7.5 12.9062 7.75 13 8 13C8.28125 13 8.53125 12.9062 8.71875 12.7188L13.7188 7.71875C14.125 7.34375 14.125 6.6875 13.7188 6.3125L8.71875 1.3125C8.34375 0.90625 7.6875 0.90625 7.3125 1.3125C6.90625 1.6875 6.90625 2.34375 7.3125 2.71875L10.5938 6H1C0.46875 6 0.03125 6.46875 0.03125 7Z" fill="white" />
+                                        </svg>
+                                    </button>
                                 </div>
                                 </div>
                             )}
                             )}
                         </div>
                         </div>

styles/globals.css

@@ -11,7 +11,9 @@ body {
   z-index: 10;
   z-index: 10;
   pointer-events: auto;
   pointer-events: auto;
 }
 }
-
+.innerbanner-section .swiperbtn1 {
+  top: 50%;
+}
 .hm-swpr-btn {
 .hm-swpr-btn {
   background: transparent;
   background: transparent;
   border-radius: 50%;
   border-radius: 50%;