carousel prev and next button update

src/widgets/welcome/ui/index.tsx

@@ -26,17 +26,25 @@ const Welcome = () => {
   const [api, setApi] = useState<CarouselApi>();
 
   const scrollPrev = () => {
-    api?.scrollPrev();
+    if (api?.canScrollPrev()) {
+      api?.scrollPrev();
+    } else if (!api?.canScrollPrev()) {
+      api?.scrollTo(api?.slideNodes().length - 1);
+    }
   };
 
   const scrollNext = () => {
-    api?.scrollNext();
+    if (api?.canScrollNext()) {
+      api?.scrollNext();
+    } else if (!api?.canScrollNext()) {
+      api?.scrollTo(0);
+    }
   };
 
   return (
     <div className="custom-container">
       <Carousel className="w-full" setApi={setApi}>
-        <CarouselContent className="!pr-[8%] sm:pr-0">
+        <CarouselContent className="!pr-[15%] lg:!pr-[8%] sm:pr-0">
           {banner.map((e, index) => (
             <CarouselItem key={index} className="relative">
               <AspectRatio ratio={16 / 8}>
@@ -52,7 +60,7 @@ const Welcome = () => {
               </AspectRatio>
               <Button
                 onClick={scrollNext}
-                className="absolute bottom-5 right-5"
+                className="absolute bottom-5 right-5 max-lg:hidden cursor-pointer"
                 variant={'secondary'}
                 size={'icon'}
               >
@@ -60,7 +68,7 @@ const Welcome = () => {
               </Button>
               <Button
                 onClick={scrollPrev}
-                className="absolute bottom-5 right-16"
+                className="absolute bottom-5 right-16 cursor-pointer max-lg:hidden"
                 variant={'secondary'}
                 size={'icon'}
               >