I have decided to create my own carasoual instead of using react-slick for less space.
I want to make the SwipeCarousel styling and the look exactly like the previous carousel (react-slick) for example the content on the carousel, the black gradient on the top, the dots... everything exactly like the previous one on the styling... keep the functionality of the current swipecarousel as it is...
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 (

{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" }}
/>
);
})}

);
};

const GradientEdges = () => {
return (
<>


</>
);
};
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: () => ,
});

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

};
export default Carousel;
CustomDots.jsx:
import React from "react";

export const CustomDots = ({ onDotClick, activeIndex, slidesLength }) => (

{[...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}}
/>
))}

);
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>
);