I have decided to create my own carasoual instead of using react-slick for less space...
I want to make the SwipeCarousel just like the previous carousel for example the content on the carousel, the black gradient, the dots... everything exactly like the previous one on the styling...
new SwipeCarousel.jsx:
'use client'
import React, { useEffect, useState } from "react";
import { motion, useMotionValue } from "framer-motion";

const imgs = [
    "/hero.png",
    "/woman.png",
    "/shoes.png",
];

const ONE_SECOND = 1000;
const AUTO_DELAY = ONE_SECOND * 10;
const DRAG_BUFFER = 50;

const SPRING_OPTIONS = {
    type: "spring",
    mass: 3,
    stiffness: 400,
    damping: 50,
};

export const SwipeCarousel = () => {
    const [imgIndex, setImgIndex] = useState(0);

    const dragX = useMotionValue(0);

    useEffect(() => {
        const intervalRef = setInterval(() => {
            const x = dragX.get();

            if (x === 0) {
                setImgIndex((pv) => {
                    if (pv === imgs.length - 1) {
                        return 0;
                    }
                    return pv + 1;
                });
            }
        }, AUTO_DELAY);

        return () => clearInterval(intervalRef);
    }, []);

    const onDragEnd = () => {
        const x = dragX.get();

        if (x <= -DRAG_BUFFER && imgIndex < imgs.length - 1) {
            setImgIndex((pv) => pv + 1);
        } else if (x >= DRAG_BUFFER && imgIndex > 0) {
            setImgIndex((pv) => pv - 1);
        }
    };

    return (
        <div className="relative overflow-hidden bg-neutral-950 py-8">
            <motion.div
                drag="x"
                dragConstraints={{
                    left: 0,
                    right: 0,
                }}
                style={{
                    x: dragX,
                }}
                animate={{
                    translateX: `-${imgIndex * 100}%`,
                }}
                transition={SPRING_OPTIONS}
                onDragEnd={onDragEnd}
                className="flex cursor-grab items-center active:cursor-grabbing"
            >
                <Images imgIndex={imgIndex} />
            </motion.div>

            <Dots imgIndex={imgIndex} setImgIndex={setImgIndex} />
            <GradientEdges />
        </div>
    );
};

const Images = ({ imgIndex }) => {
    return (
        <>
            {imgs.map((imgSrc, idx) => {
                return (
                    <motion.div
                        key={idx}
                        style={{
                            backgroundImage: `url(${imgSrc})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center",
                        }}
                        animate={{
                            scale: imgIndex === idx ? 0.95 : 0.85,
                        }}
                        transition={SPRING_OPTIONS}
                        className="aspect-video w-screen shrink-0 rounded-xl bg-neutral-800 object-cover"
                    />
                );
            })}
        </>
    );
};

const Dots = ({ imgIndex, setImgIndex }) => {
    return (
        <div className="mt-4 flex w-full justify-center gap-2">
            {imgs.map((_, idx) => {
                return (
                    <button
                        key={idx}
                        onClick={() => setImgIndex(idx)}
                        className={`h-3 w-3 rounded-full transition-colors ${
                            idx === imgIndex ? "bg-neutral-50" : "bg-neutral-500"
                        }`}
                    />
                );
            })}
        </div>
    );
};

const GradientEdges = () => {
    return (
        <>
            <div className="pointer-events-none absolute bottom-0 left-0 top-0 w-[10vw] max-w-[100px] bg-gradient-to-r from-neutral-950/50 to-neutral-950/0" />
            <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-[10vw] max-w-[100px] bg-gradient-to-l from-neutral-950/50 to-neutral-950/0" />
        </>
    );
};
Old one:
'use client';

import React, { useState, useRef } from 'react';
import dynamic from 'next/dynamic';
const CarouselSlide = dynamic(() => import('@/components/carousel/CarouselSlide').then(mod => mod.CarouselSlide), { ssr: true });
const CustomDots = dynamic(() => import('@/components/carousel/CustomDots').then(mod => mod.CustomDots), { ssr: true });
const Slider = dynamic(() => import("react-slick"), {
    loading: () => <SliderSkeleton />,
});


const Carousel = () => {
    const [activeSlide, setActiveSlide] = useState(0);
    const sliderRef = useRef(null);

    const slides = [
        {
            image: '/hero.png',
            title: 'Find Our Women Jacket',
            buttonText: 'Discover more',
        },
        {
            image: '/shoes.png',
            title: 'Explore New Arrivals',
            buttonText: 'Shop Now',
        },
        {
            image: '/bags.png',
            title: 'Summer Collection',
            buttonText: 'Browse Collection',
        },
        {
            image: '/woman.png',
            title: 'Exclusive Offers',
            buttonText: 'Learn More',
        },
        // Add more slides as needed
    ];

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
        pauseOnHover: false,
        arrows: false,
        beforeChange: (current, next) => setActiveSlide(next),
        accessibility: true,
        adaptiveHeight: true,
        swipeToSlide: true,
        touchThreshold: 10,
        useCSS: true,
        useTransform: true,
    };

    const handleDotClick = (index) => {
        if (sliderRef.current) {
            sliderRef.current.slickGoTo(index);
        }
    };

    return (
        <div className="relative overflow-hidden">
            <Slider ref={sliderRef} {...settings}>
                {slides.map((slide, index) => (
                    <CarouselSlide key={index} {...slide} />
                ))}
            </Slider>
            <CustomDots
                onDotClick={handleDotClick}
                activeIndex={activeSlide}
                slidesLength={slides.length}
            />
        </div>
    );
};
const SliderSkeleton = () => {
    return <div className="w-full bg-gray-200 animate-pulse min-h-96 rounded-md"></div>
};
export default Carousel;
CustomDots.jsx:
import React from "react";

export const CustomDots = ({ onDotClick, activeIndex, slidesLength }) => (
    <div className="custom-dots flex items-center gap-1.5 absolute bottom-4 left-6">
        {[...Array(slidesLength)].map((_, i) => (
            <button
                key={i}
                onClick={() => onDotClick(i)}
                className={`size-1 relative rounded-full transition-all duration-300 ease-in-out 
          ${i === activeIndex ? 'bg-black after:size-2.5 after:block after:rounded-full after:absolute after:bg-transparent after:border-black after:border after:bottom-0 after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:right-0 ' : 'bg-black'}`}
                aria-label={`Go to slide ${i + 1}`}
            />
        ))}
    </div>
);
CarouselSlide.jsx:
import Image from "next/image";
import React from "react";

export const CarouselSlide = ({ image, title, buttonText }) => (
    <div className="relative w-full min-h-96">
        <Image
            src={image}
            alt={title}
            fill
            style={{ objectFit: 'cover' }}
            priority
        />
        <div className="absolute top-0 left-0 right-0 h-44 bg-gradient-to-b from-black via-transparent to-transparent"></div>
        <div className="absolute font-chivo bottom-24 left-8 text-white">
            <h2 className="text-2xl font-medium mb-4 max-w-[204px] leading-tight">
                {title}
            </h2>
            <button className="border border-white px-4 py-2 text-xs rounded hover:bg-white hover:text-black transition-colors duration-300 ease-in-out">
                {buttonText}
            </button>
        </div>
    </div>
);