<template> <DocSectionText v-bind="$attrs"> <p> Carousel supports specific configuration per screen size with the <i>responsiveOptions</i> property that takes an array of objects where each object defines the max-width <i>breakpoint</i>, <i>numVisible</i> for the number of items items per page and <i>numScroll</i> for number of items to scroll. When <i>responsiveOptions</i> is defined, the <i>numScroll</i> and <i>numVisible</i> properties of the Carousel are used as default when there is breakpoint that applies. </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: 3, numScroll: 3 }, { breakpoint: '991px', numVisible: 2, numScroll: 2 }, { 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: 3, numScroll: 3 }, { breakpoint: '991px', numVisible: 2, numScroll: 2 }, { 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: 3, numScroll: 3 }, { breakpoint: '991px', numVisible: 2, numScroll: 2 }, { 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>