How to disable vertical carousel scroll when items are over?

On mobile devices the carousel prevents natural page scroll

Is there a way to resume natural page scroll when items are over?

Code:

"use client"
import { useEffect, useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
    type CarouselApi,
} from "@/components/ui/carousel"
import { cn } from "@/lib/utils"
import { AiOutlineWhatsApp } from "react-icons/ai"
import { FaChevronLeft } from "react-icons/fa"
import AnimatedLink from "@/components/local/animated-link"
// Mock data for services
const services = [
    {
        id: 1,
        title: "صيانة الكهرباء",
        description:
            "في سوق مليء بالحلول المؤقتة والأيدي غير المؤهلة، نحن نقدم لك الاحترافية التي تستحقها...",
        image: "/service-1.png",
        price: "100",
    },
    {
        id: 2,
        title: "صيانة الكهرباء",
        description:
            "في سوق مليء بالحلول المؤقتة والأيدي غير المؤهلة، نحن نقدم لك الاحترافية التي تستحقها...",
        image: "/service-2.png",
        price: "150",
    },
    {
        id: 3,
        title: "صيانة الكهرباء",
        description:
            "في سوق مليء بالحلول المؤقتة والأيدي غير المؤهلة، نحن نقدم لك الاحترافية التي تستحقها...",
        image: "/service-3.png",
        price: "200",
    },
    // Add more services...
]

export default function ServicesSlider() {
    const [api, setApi] = useState<CarouselApi>()
    const [current, setCurrent] = useState(0)
    const [count, setCount] = useState(0)

    useEffect(() => {
        if (!api) return
        setCount(api.scrollSnapList().length)
        setCurrent(api.selectedScrollSnap() + 1)

        api.on("select", () => {
            setCurrent(api.selectedScrollSnap() + 1)
        })
    }, [api])

    return (
        <section
            id="services"
            className="w-full pb-10 md:py-16 bg-gradient-to-r from-black via-wine-700 to-wine-800 text-white"
        >
            <div className="px-4 md:px-6 mb-10 pt-10 md:pt-0">
                <h2 className="text-3xl font-bold tracking-tighter text-center sm:text-4xl md:text-5xl m-0">
                    خدمات آي فيكس
                </h2>
            </div>

            <Carousel
                opts={{ align: "start" }}
                orientation="vertical"
                className="w-full max-w-5xl mx-auto h-[500px] mt-16 mb-20 md:my-24 text-center md:text-right"
                setApi={setApi}
                dir="ltr"
            >
                <CarouselContent className="-mt-1 h-[500px]">
                    {services.map((service) => (
                        <CarouselItem
                            key={service.id}
                            className="pt-1 md:basis-3/4"
                        >
                            <div className="p-1">
                                <Card>
                                    <CardContent className="flex flex-col md:flex-row p-6 gap-2">
                                        <div className="flex flex-col justify-between md:w-1/2 md:pr-6">
                                            <div>
                                                <h3 className="text-3xl font-semibold mb-2">
                                                    {service.title}
                                                </h3>
                                                <p className="text-muted-foreground mb-4 text-xl">
                                                    {service.description}
                                                </p>

                                                <p
                                                    className="text-2xl font-bold text-wine-800 mb-2"
                                                    dir="rtl"
                                                >
                                                    ابتداءً من&nbsp;
                                                    {service.price} ر.س&nbsp;
                                                </p>
                                            </div>
                                            <Button className="w-1/2 mx-auto md:mr-0 text-lg bg-green-600">
                                                <AiOutlineWhatsApp />
                                                &nbsp; احجز الخدمة
                                            </Button>
                                        </div>
                                        <div className="md:w-1/2 mt-4 md:mt-0">
                                            <Image
                                                src={service.image}
                                                alt={service.title}
                                                width={400}
                                                height={300}
                                                className="rounded-lg object-cover w-full h-[200px] md:h-[300px]"
                                            />
                                        </div>
                                    </CardContent>
                                </Card>
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
                {current > 1 && (
                    <CarouselPrevious
                        className={cn(
                            current === 1
                                ? "opacity-0 pointer-events-none"
                                : "opacity-100"
                        )}
                    />
                )}
                <CarouselNext
                    className={cn(
                        "transition-opacity duration-900 ease-in-out",
                        current === count ? "opacity-50" : "opacity-100",
                        count > 1 && "animate-pulse"
                    )}
                />
            </Carousel>

            <div className="flex justify-center mt-12">
                <AnimatedLink
                    color={"muted"}
                    textColor={"white"}
                    text={"كافة الخدمات"}
                    icon={<FaChevronLeft />}
                    href={"/services"}
                />
            </div>
        </section>
    )
}