From 7d9545964d1d2b1a01a720583e23d6d71cc20561 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 12:14:33 +0300
Subject: [PATCH] Update carousel docs

---
 doc/carousel/BasicDoc.vue      |  45 ++++--
 doc/carousel/CircularDoc.vue   |  49 ++++---
 doc/carousel/NumScrollDoc.vue  | 259 ---------------------------------
 doc/carousel/ResponsiveDoc.vue |  42 ++++--
 doc/carousel/VerticalDoc.vue   |  87 +++--------
 pages/carousel/index.vue       |   6 -
 6 files changed, 104 insertions(+), 384 deletions(-)
 delete mode 100644 doc/carousel/NumScrollDoc.vue

diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index b1520d120..5561d314a 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -14,9 +14,9 @@
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -35,7 +35,12 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -62,9 +67,9 @@ export default {
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" 
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <Button icon="pi pi-search" rounded />
+                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
                 </div>
             </div>
         </div>
@@ -84,9 +89,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -103,8 +108,13 @@ export default {
         return {
             products: null,
             responsiveOptions: [
+            {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -157,9 +167,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -179,7 +189,12 @@ onMounted(() => {
 const products = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '1199px',
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1200px',
         numVisible: 1,
         numScroll: 1
     },
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index f2eef2b40..e42f1e27c 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -14,10 +14,9 @@
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -36,7 +35,12 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -63,10 +67,9 @@ export default {
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                    <Button icon="pi pi-cog" rounded severity="help" />
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <Button icon="pi pi-search" rounded />
+                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
                 </div>
             </div>
         </div>
@@ -86,10 +89,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -107,7 +109,12 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -160,10 +167,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -183,7 +189,12 @@ onMounted(() => {
 const products = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '1199px',
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1200px',
         numVisible: 1,
         numScroll: 1
     },
diff --git a/doc/carousel/NumScrollDoc.vue b/doc/carousel/NumScrollDoc.vue
deleted file mode 100644
index 633476450..000000000
--- a/doc/carousel/NumScrollDoc.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-    </DocSectionText>
-
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-    <DocSectionCode :code="code" :service="['ProductService']" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1199px',
-                    numVisible: 1,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
-            code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-    <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-            <div class="mb-3">
-                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                    <Button icon="pi pi-cog" rounded severity="help" />
-                </div>
-            </div>
-        </div>
-    </template>
-</Carousel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1199px',
-                    numVisible: 1,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '991px',
-                    numVisible: 2,
-                    numScroll: 1
-                },
-                {
-                    breakpoint: '767px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1199px',
-        numVisible: 1,
-        numScroll: 1
-    },
-    {
-        breakpoint: '991px',
-        numVisible: 2,
-        numScroll: 1
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>
-`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
-    },
-    methods: {
-        getSeverity(status) {
-            switch (status) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index a0c2a6ce6..cb40dffa3 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -17,10 +17,9 @@
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -39,7 +38,12 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -66,10 +70,9 @@ export default {
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                    <Button icon="pi pi-cog" rounded severity="help" />
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <Button icon="pi pi-search" rounded />
+                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
                 </div>
             </div>
         </div>
@@ -89,10 +92,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -110,7 +112,12 @@ export default {
             products: null,
             responsiveOptions: [
                 {
-                    breakpoint: '1199px',
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1200px',
                     numVisible: 1,
                     numScroll: 1
                 },
@@ -186,7 +193,12 @@ onMounted(() => {
 const products = ref();
 const responsiveOptions = ref([
     {
-        breakpoint: '1199px',
+        breakpoint: '1400px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '1200px',
         numVisible: 1,
         numScroll: 1
     },
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index 10a70b403..6c63f4274 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
 
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" containerStyle="max-width: 30rem" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
@@ -14,10 +14,9 @@
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -34,27 +33,10 @@ export default {
     data() {
         return {
             products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3,
-                    numScroll: 3
-                },
-                {
-                    breakpoint: '600px',
-                    numVisible: 2,
-                    numScroll: 2
-                },
-                {
-                    breakpoint: '480px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ],
             code: {
                 basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
-    :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
+<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" 
+    containerStyle="max-width: 30rem" contentClass="flex align-items-center">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -64,10 +46,9 @@ export default {
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5">
-                    <Button icon="pi pi-search" rounded class="mr-2" />
-                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                    <Button icon="pi pi-cog" rounded severity="help" />
+                <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                    <Button icon="pi pi-search" rounded />
+                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
                 </div>
             </div>
         </div>
@@ -78,7 +59,7 @@ export default {
 <template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
-            :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
+            containerStyle="max-width: 30rem" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
@@ -88,10 +69,9 @@ export default {
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
+                            <Button icon="pi pi-search" rounded />
+                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
                         </div>
                     </div>
                 </div>
@@ -106,24 +86,7 @@ import { ProductService } from '@/service/ProductService';
 export default {
     data() {
         return {
-            products: null,
-            responsiveOptions: [
-                {
-                    breakpoint: '1024px',
-                    numVisible: 3,
-                    numScroll: 3
-                },
-                {
-                    breakpoint: '600px',
-                    numVisible: 2,
-                    numScroll: 2
-                },
-                {
-                    breakpoint: '480px',
-                    numVisible: 1,
-                    numScroll: 1
-                }
-            ]
+            products: null
         };
     },
     mounted() {
@@ -152,8 +115,8 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
-            :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" 
+            containerStyle="max-width: 30rem" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
@@ -184,23 +147,7 @@ onMounted(() => {
 })
 
 const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 3,
-        numScroll: 3
-    },
-    {
-        breakpoint: '600px',
-        numVisible: 2,
-        numScroll: 2
-    },
-    {
-        breakpoint: '480px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
+
 const getSeverity = (status) => {
     switch (status) {
         case 'INSTOCK':
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index 1315bb0f0..d498d0bcc 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -15,7 +15,6 @@ import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/carousel/BasicDoc.vue';
 import CircularDoc from '@/doc/carousel/CircularDoc.vue';
 import ImportDoc from '@/doc/carousel/ImportDoc.vue';
-import NumScrollDoc from '@/doc/carousel/NumScrollDoc.vue';
 import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc.vue';
 import VerticalDoc from '@/doc/carousel/VerticalDoc.vue';
 import PTComponent from '@/doc/carousel/pt/index.vue';
@@ -40,11 +39,6 @@ export default {
                     label: 'Circular',
                     component: CircularDoc
                 },
-                {
-                    id: 'numscroll',
-                    label: 'Num Scroll',
-                    component: NumScrollDoc
-                },
                 {
                     id: 'responsive',
                     label: 'Responsive',