Merge pull request #3363 from OneCommunityGlobal/bhavpreet_carousel_fix

Bhavpreet - changed custom carousel to that of bootstraps

Author: one-community

src/components/LBDashboard/ListingOverview/ImageCarousel.css

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import './Listoverview.css';
+import Carousel from 'react-bootstrap/Carousel';
 import logo from '../../../assets/images/logo2.png';
 import mapIcon from '../../../assets/images/mapIcon.png';
-import ImageCarousel from './ImageCarousel';
 
 function ListOverview() {
   const [listing, setListing] = React.useState({});
@@ -37,20 +37,27 @@ function ListOverview() {
               <h1>{listing.title}</h1>
             </div>
             <div className="image-carousel">
-              <ImageCarousel images={listing.images} />
+              <Carousel>
+                {listing.images?.map((image, index) => (
+                  <Carousel.Item key={image}>
+                    <img className="d-block w-100" src={image} alt={`Slide ${index + 1}`} />
+                  </Carousel.Item>
+                ))}
+              </Carousel>
             </div>
+
             <div className="amenities">
               <div>
                 <h2>Available amenities in this unit:</h2>
-                <ol>
+                <ol className="amenities-list">
                   {listing.unitAmenities?.map(amenity => (
                     <li key={amenity}>{amenity}</li>
                   ))}
                 </ol>
               </div>
               <div>
                 <h2>Village level amenities:</h2>
-                <ol>
+                <ol className="amenities-list">
                   {listing.villageAmenities?.map(amenity => (
                     <li key={amenity}>{amenity}</li>
                   ))}

src/components/LBDashboard/ListingOverview/ImageCarousel.jsx

@@ -75,6 +75,15 @@
   margin-bottom: 2.5%;
 }
 
+.image-carousel img {
+  width: 100%; 
+  height: auto; 
+  object-fit: cover;
+  max-width: 100%;
+  flex-shrink: 0; 
+}
+
+
 .amenities {
   display: flex;
   justify-content: center;
@@ -96,12 +105,12 @@
   padding-left: 5%;
 }
 
-ol {
+.amenities-list {
   display: flex;
   flex-direction: column;
   list-style-position: inside;
 }
-li {
+.amenities-list li {
   margin: 0;
 }