<section class="container-fluid mx-auto px-5 first-section pm-doctor-slider-section pmbg">
        <h2>Meet Our Doctors</h2>
        <div class="owl-carousel owl-theme">
            <!-- Doctor Card 1 -->
            <div class="item">
                <div class="pm-doctor-slider-card">
                    <img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
                    <h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
                    <p class="text-muted mb-1">Neurologist</p>
                    <p class="mb-1">Fortis Hospital, Bangalore</p>
                    <p class="mb-3 text-muted">(Bannerghatta Road)</p>
                    <p class="mb-3">38 years of experience</p>
                    <button class="pm-doctor-slider-btn-whatsapp mb-3">
                        <i class="fab fa-whatsapp"></i> Chat
                    </button>
                    <button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
                </div>
            </div>

            <!-- Doctor Card 2 (Example) -->
            <div class="item">
                <div class="pm-doctor-slider-card">
                    <img src="https://placehold.co/120" alt="Dr. John Doe" class="pm-doctor-slider-img">
                    <h5 class="mb-1">Dr. John Doe</h5>
                    <p class="text-muted mb-1">Cardiologist</p>
                    <p class="mb-1">Apollo Hospital, Mumbai</p>
                    <p class="mb-3 text-muted">(Worli Road)</p>
                    <p class="mb-3">25 years of experience</p>
                    <button class="pm-doctor-slider-btn-whatsapp mb-3">
                        <i class="fab fa-whatsapp"></i> Chat
                    </button>
                    <button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
                </div>
            </div>

            <!-- Doctor Card 3 (Example) -->
            <div class="item">
                <div class="pm-doctor-slider-card">
                    <img src="https://placehold.co/120" alt="Dr. Jane Smith" class="pm-doctor-slider-img">
                    <h5 class="mb-1">Dr. Jane Smith</h5>
                    <p class="text-muted mb-1">Pediatrician</p>
                    <p class="mb-1">Max Hospital, Delhi</p>
                    <p class="mb-3 text-muted">(Saket Road)</p>
                    <p class="mb-3">20 years of experience</p>
                    <button class="pm-doctor-slider-btn-whatsapp mb-3">
                        <i class="fab fa-whatsapp"></i> Chat
                    </button>
                    <button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
                </div>
            </div>

            <!-- Doctor Card 4 (Example, to match the image) -->
            <div class="item">
                <div class="pm-doctor-slider-card">
                    <img src="https://placehold.co/120" alt="Dr. Chandran Gnanamuthu" class="pm-doctor-slider-img">
                    <h5 class="mb-1">Dr. Chandran Gnanamuthu</h5>
                    <p class="text-muted mb-1">Neurologist</p>
                    <p class="mb-1">Fortis Hospital, Bangalore</p>
                    <p class="mb-3 text-muted">(Bannerghatta Road)</p>
                    <p class="mb-3">38 years of experience</p>
                    <button class="pm-doctor-slider-btn-whatsapp mb-3">
                        <i class="fab fa-whatsapp"></i> Chat
                    </button>
                    <button class="pm-doctor-slider-btn-contact">Contact Doctor</button>
                </div>
            </div>
        </div>
        <button class="pm-doctor-slider-see-more">See More Doctors</button>
    </section>
 .pmbg {
            background: linear-gradient(to bottom, #f5e7bc, #f8f9fa);
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .pm-doctor-slider-section {
            padding: 40px 0;
            text-align: center;
            position: relative;
            max-width: 1400px; /* Ensure enough width for 4 cards + margins + arrows */
            margin: 0 auto;
        }
        .pm-doctor-slider-section h2 {
            color: #8b6f47;
            font-size: 24px;
            margin-bottom: 30px;
            font-weight: bold;
        }
        .pm-doctor-slider-card {
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            max-width: 280px; /* Slightly reduced to fit 4 cards better */
            margin: 0 auto;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid #e9ecef;
        }
        .pm-doctor-slider-img {
            width: 120px !important;
            height: 120px !important;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            margin: 0 auto 15px;
        }
        .pm-doctor-slider-btn-whatsapp {
            background-color: #25d366;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
        }
        .pm-doctor-slider-btn-whatsapp:hover {
            background-color: #1da851;
            color: white;
        }
        .pm-doctor-slider-btn-contact {
            background-color: #f4c430;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            width: 100%;
            font-size: 14px;
            margin-top: 10px;
        }
        .pm-doctor-slider-btn-contact:hover {
            background-color: #d9a406;
            color: white;
        }
        /* Owl Carousel custom styling */
        .owl-carousel {
            overflow: visible; /* Prevent clipping of navigation arrows */
        }
        .owl-carousel .owl-item .pm-doctor-slider-card {
            margin-right: 10px; /* Reduce margin to fit 4 cards better */
        }
        .owl-carousel .pm-doctor-slider-owl-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            pointer-events: none; /* Ensure arrows don't interfere with card clicks */
        }
        .owl-carousel .pm-doctor-slider-owl-nav button {
            background: rgba(0, 0, 0, 0.5) !important;
            color: white !important;
            border: none !important;
            font-size: 24px !important;
            width: 40px !important;
            height: 40px !important;
            border-radius: 50% !important;
            z-index: 10; /* Ensure arrows stay on top */
            pointer-events: auto; /* Allow arrows to be clickable */
        }

        /* Hide arrows on mobile (screens < 600px) only */
        @media (max-width: 599px) {
            .owl-carousel .pm-doctor-slider-owl-nav {
                display: none;
            }
        }

        /* Position arrows at the middle left and right of the cards */
        .owl-carousel .pm-doctor-slider-owl-nav button.owl-prev {
            left: 0;
            margin-left: 10px; /* Small margin to avoid touching the edge */
            transform: translateY(-50%) translateX(-50%); /* Center vertically and move left to middle of left edge */
        }
        .owl-carousel .pm-doctor-slider-owl-nav button.owl-next {
            right: 0;
            margin-right: 10px; /* Small margin to avoid touching the edge */
            transform: translateY(-50%) translateX(50%); /* Center vertically and move right to middle of right edge */
        }

        /* Override disabled class to keep arrows visible and clickable */
        .owl-nav.disabled {
            pointer-events: auto !important;
            opacity: 1 !important;
        }

        .owl-nav.disabled button {
            background: rgba(0, 0, 0, 0.5) !important;
            color: white !important;
        }

        .pm-doctor-slider-see-more {
            background-color: #f4c430;
            color: white;
            border: none;
            padding: 10px 30px;
            border-radius: 25px;
            font-size: 16px;
            margin-top: 30px;
            display: inline-block;
        }
        .pm-doctor-slider-see-more:hover {
            background-color: #d9a406;
            color: white;
        }
.owl-nav {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    top: -300px !important;
}
.owl-prev,
.owl-next{
  height:30px !important;
  width:30px !important;
  border-radius:30px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}
  $(document).ready(function(){
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                dots: false,
                navText: [
                    '<button class="owl-prev"><i class="fa fa-chevron-left"></i></button>',
                    '<button class="owl-next"><i class="fa fa-chevron-right"></i></button>'
                ],
                responsive: {
                    0: {
                        items: 1,
                        nav: false // Hide arrows on mobile
                    },
                    600: {
                        items: 3,
                        nav: true
                    },
                    1000: {
                        items: 4,
                        nav: true
                    }
                },
                checkVisible: true,
                stagePadding: 0
            });

            // Prevent disabled class on large screens
            $(window).on('resize', function() {
                if ($(window).width() >= 600) { // Apply to tablets and desktops
                    $('.owl-nav').removeClass('disabled');
                }
            });
        });
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js
  2. https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js
  3. https://code.jquery.com/jquery-3.6.0.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js