updated miltiple banner in inner pages

components/Collection/InnerBannerproduct.js

-import React from 'react'
-import { Col, Row } from 'react-bootstrap'
-import { cleanImage } from '../services/imageHandling'
+import { Col, Row } from "react-bootstrap";
+import { cleanImage } from "../services/imageHandling";
 import Heading from "@/components/Heading";
-import Image from 'next/image';
-const InnerBannerproduct = ({productData}) => {
+import Image from "next/image";
 
+import React, { useState, useEffect } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import SwiperBtn from "@/components/Layout/SwiperBtn";
+import Link from "next/link";
+
+const InnerBannerproduct = ({ productData }) => {
+    console.log("productData", productData);
     return (
         <>
-        <section className='innerbanner-section'>
-            <div className='innerbanner product-details'>
+            <section className="innerbanner-section">
+                <div className="innerbanner product-details">
                     <Row>
                         <Col>
-                        <div className='product-banner'>
-                             <Image width={1856} height={1086} src={cleanImage(productData?.image?.url)} alt="" />
+                            {/* <div className='product-banner'>
+                             <Image width={1856} height={1086} src={cleanImage(productData?.image[0]?.url)} alt="" />
                              <div className='info'>
                                  <Heading el="h2" heading={productData?.title} />
                                  <div dangerouslySetInnerHTML={{__html: productData?.description}}></div>
                              </div>
+                        </div> */}
+                            <div className="product-banner">
+                                <Swiper
+                                    navigation={{
+                                        nextEl: ".cust-swiper-button-next",
+                                        prevEl: ".cust-swiper-button-prev",
+                                    }}
+                                    pagination={{ clickable: true }}
+                                    // autoplay={false}
+                                    autoplay={{ delay: 5000, disableOnInteraction: false }}
+                                    loop={false}
+                                    modules={[Navigation, Pagination, Autoplay]}
+                                    className="homeBannerSwiper"
+                                >
+                                    <div className="position-absolute swiperbtn1 d-lg-flex d-none  justify-content-md-between  wrapper-full align-items-center w-100">
+                                        <SwiperBtn />
+                                    </div>
+
+                                    {productData?.image?.map((item, index) => (
+                                        <SwiperSlide key={index}>
+                                            <Image
+                                                width={1856}
+                                                height={1086}
+                                                src={cleanImage(item?.url)}
+                                                alt=""
+                                            />
+                                        </SwiperSlide>
+                                    ))}
+                                </Swiper>
+                                <div className="info">
+                                    <Heading el="h2" heading={productData?.title} />
+                                    <div
+                                        dangerouslySetInnerHTML={{
+                                            __html: productData?.description,
+                                        }}
+                                    ></div>
+                                </div>
                             </div>
                         </Col>
                     </Row>
                 </div>
             </section>
         </>
-  )
-}
+    );
+};
 
-export default InnerBannerproduct
+export default InnerBannerproduct;

components/Collection/InnerDetails.js

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import { cleanImage } from "../services/imageHandling";
 
 const InnerDetails = ({ subCategories }) => {
- 
+  console.log("subCategories", subCategories)
 
   const router = useRouter();
   const { category } = router.query;

components/Collection/InnerDetailsSubCategory.js

@@ -7,6 +7,7 @@ import FilterButton from "../Common/FilterButton";
 import { cleanImage } from "../services/imageHandling";
 
 const InnerDetailsSubCategory = ({ products }) => {
+  console.log("products 123", products)
   const router = useRouter();
   const { category, subCategory } = router.query;
 const [showFilter, setShowFilter] = useState(false);
@@ -85,7 +86,8 @@ const [showFilter, setShowFilter] = useState(false);
                   <Image
                     width={868}
                     height={560}
-                    src={cleanImage(product?.image?.url)}
+                    src={cleanImage(product?.image?.[0]?.url)}
+
                     alt={product.title}
                   />
                   <div className="title">{product.title}</div>

styles/globals.css

@@ -514,7 +514,7 @@ input:focus-visible {
 .collections-item img {
   width: 100%;
   height: auto;
-  min-height: 29vw;
+  max-height: 29vw;
   object-fit: cover;
 }
 .collections-item .title {
@@ -535,6 +535,11 @@ input:focus-visible {
   left: 6.6rem;
   color: #fff;
   width: 40%;
+  z-index: 1;
+}
+.innerbanner-section .homeBannerSwiper{
+  margin-top: 0;
+  height: calc(100vh - 115px);
 }
 .product-banner .info .heading {
   color: #fff;