2022-09-09 20:41:18 +00:00
< template >
2022-12-08 12:26:57 +00:00
< AppDoc name = "CarouselDemo" :sources ="sources" :service ="['ProductService']" :data ="['products-small']" github = "carousel/CarouselDemo.vue" >
< h5 > Import via Module < / h5 >
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
import Carousel from 'primevue/carousel' ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Import via CDN < / h5 >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; script src = "https://unpkg.com/primevue@^3/core/core.min.js" & gt ; & lt ; / s c r i p t & g t ;
& lt ; script src = "https://unpkg.com/primevue@^3/carousel/carousel.min.js" & gt ; & lt ; / s c r i p t & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Getting Started < / h5 >
< p > Carousel requires a collection of items as its value along with a template to render each item . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" & gt ;
& lt ; template # item = "slotProps" & gt ;
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Items per page and Scroll Items < / h5 >
< p > Number of items per page is defined using the < i > numVisible < / i > property whereas number of items to scroll is defined with the < i > numScroll < / i > property . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" : numVisible = "3" : numScroll = "1" & gt ;
& lt ; template # item = "slotProps" & gt ;
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Responsive < / h5 >
< p > For responsive design , < i > numVisible < / i > and < i > numScroll < / i > can be defined using the < i > responsiveOptions < / i > property that should be an array of objects whose breakpoint defines the max - width to apply the settings . < / p >
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" : numVisible = "4" : numScroll = "3" : responsiveOptions = "responsiveOptions" & gt ;
& lt ; template # header & gt ;
& lt ; h2 & gt ; Basic & lt ; / h 2 & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # item = "slotProps" & gt ;
& lt ; div class = "car-item" & gt ;
& lt ; div class = "car-content" & gt ;
& lt ; div & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img : src = "'demo/images/car/' + slotProps.data.brand + '.png'" : alt = "slotProps.data.brand" / & gt ;
2022-09-09 20:41:18 +00:00
& lt ; / d i v & g t ;
& lt ; div & gt ;
& lt ; div class = "car-title" & gt ; { { slotProps . data . brand } } & lt ; / d i v & g t ;
& lt ; div class = "car-subtitle" & gt ; { { slotProps . data . year } } | { { slotProps . data . color } } & lt ; / d i v & g t ;
& lt ; div class = "car-buttons" & gt ;
& lt ; Button icon = "pi pi-search" class = "p-button-secondary" / & gt ;
& lt ; Button icon = "pi pi-star-fill" class = "p-button-secondary" / & gt ;
& lt ; Button icon = "pi pi-cog" class = "p-button-secondary" / & gt ;
& lt ; / d i v & g t ;
& lt ; / d i v & g t ;
& lt ; / d i v & g t ;
& lt ; / d i v & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
data ( ) {
return {
responsiveOptions : [
{
breakpoint : '1024px' ,
numVisible : 3 ,
numScroll : 3
} ,
{
breakpoint : '600px' ,
numVisible : 2 ,
numScroll : 2
} ,
{
breakpoint : '480px' ,
numVisible : 1 ,
numScroll : 1
}
]
}
} ,
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Header and Footer < / h5 >
< p > Custom content projection is available using the < i > item < / i > , < i > header < / i > and < i > footer < / i > templates . < / p >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" : numVisible = "3" : numScroll = "1" : responsiveOptions = "responsiveOptions" & gt ;
& lt ; template # header & gt ;
& lt ; h2 & gt ; Custom Header & lt ; / h 2 & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # item = "slotProps" & gt ;
Content
& lt ; / t e m p l a t e & g t ;
& lt ; template # footer & gt ;
& lt ; h2 & gt ; Custom Footer & lt ; / h 2 & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Orientation < / h5 >
< p > Default layout of the Carousel is horizontal , other possible option is the vertical mode that is configured with the < i > orientation < / i > property . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" : numVisible = "1" : numScroll = "1" orientation = "vertical" verticalViewPortHeight = "330px" : responsiveOptions = "responsiveOptions" & gt ;
& lt ; template # item = "slotProps" & gt ;
Content
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > AutoPlay and Circular < / h5 >
< p > When < i > autoplayInterval < / i > is defined in milliseconds , items are scrolled automatically . In addition , for infinite scrolling < i > circular < / i > property needs to be enabled . Note that in autoplay mode , circular is enabled by default . < / p >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; Carousel : value = "cars" : numVisible = "3" : numScroll = "1" : circular = "true" : autoplayInterval = "3000" & gt ;
& lt ; template # header & gt ;
& lt ; h2 & gt ; Circular , AutoPlay & lt ; / h 2 & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # item = "slotProps" & gt ;
Content
& lt ; / t e m p l a t e & g t ;
& lt ; / C a r o u s e l & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Properties < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Type < / th >
< th > Default < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > value < / td >
< td > array < / td >
< td > null < / td >
< td > An array of objects to display . < / td >
< / tr >
< tr >
< td > page < / td >
< td > number < / td >
< td > null < / td >
< td > Index of the first item . < / td >
< / tr >
< tr >
< td > circular < / td >
< td > boolean < / td >
< td > false < / td >
< td > Defines if scrolling would be infinite . < / td >
< / tr >
< tr >
< td > autoplayInterval < / td >
< td > number < / td >
< td > null < / td >
< td > Time in milliseconds to scroll items automatically . < / td >
< / tr >
< tr >
< td > numVisible < / td >
< td > number < / td >
< td > 1 < / td >
< td > Number of items per page . < / td >
< / tr >
< tr >
< td > numScroll < / td >
< td > number < / td >
< td > 1 < / td >
< td > Number of items to scroll . < / td >
< / tr >
< tr >
< td > responsiveOptions < / td >
< td > any < / td >
< td > null < / td >
< td > An array of options for responsive design . < / td >
< / tr >
< tr >
< td > orientation < / td >
< td > string < / td >
< td > horizontal < / td >
< td > Specifies the layout of the component , valid values are "horizontal" and "vertical" . < / td >
< / tr >
< tr >
< td > verticalViewPortHeight < / td >
< td > string < / td >
< td > 300 px < / td >
< td > Height of the viewport in vertical layout . < / td >
< / tr >
< tr >
< td > contentClass < / td >
< td > string < / td >
< td > null < / td >
< td > Style class of main content . < / td >
< / tr >
< tr >
< td > containerClass < / td >
< td > string < / td >
< td > null < / td >
< td > Style class of the viewport container . < / td >
< / tr >
< tr >
< td > indicatorsContentClass < / td >
< td > string < / td >
< td > null < / td >
< td > Style class of the indicator items . < / td >
< / tr >
< tr >
< td > showNavigators < / td >
< td > boolean < / td >
< td > true < / td >
< td > Whether to display navigation buttons in container . < / td >
< / tr >
< tr >
< td > showIndicators < / td >
< td > boolean < / td >
< td > true < / td >
< td > Whether to display indicator container . < / td >
< / tr >
< tr >
< td > prevButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the previous navigation button . < / td >
< / tr >
< tr >
< td > nextButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the next navigation button . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< h5 > Slots < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > header < / td >
< td > - < / td >
< / tr >
< tr >
< td > item < / td >
< td >
data : Data of the component < br / >
index : Index of the item
< / td >
< / tr >
< tr >
< td > footer < / td >
< td > - < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< h5 > Styling < / h5 >
< p > Following is the list of structural style classes , for theming classes visit < router -link to = "/theming" > theming < / r o u t e r - l i n k > p a g e . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Element < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > p - carousel < / td >
< td > Container element . < / td >
< / tr >
< tr >
< td > p - carousel - header < / td >
< td > Header section . < / td >
< / tr >
< tr >
< td > p - carousel - footer < / td >
< td > Footer section . < / td >
< / tr >
< tr >
< td > p - carousel - content < / td >
< td > Main content element . It contains the container of the viewport . < / td >
< / tr >
< tr >
< td > p - carousel - container < / td >
< td > Container of the viewport . It contains navigation buttons and viewport . < / td >
< / tr >
< tr >
< td > p - carousel - items - content < / td >
< td > Viewport . < / td >
< / tr >
< tr >
< td > p - carousel - indicators < / td >
< td > Container of the indicators . < / td >
< / tr >
< tr >
< td > p - carousel - indicator < / td >
< td > Indicator element . < / td >
< / tr >
< / tbody >
< / table >
< / div >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< h5 > Accessibility < / h5 >
< h6 > Screen Reader < / h6 >
< p >
Carousel uses < i > region < / i > role and since any attribute is passed to the main container element , attributes such as < i > aria - label < / i > and < i > aria - roledescription < / i > can be used as well . The slides container has
< i > aria - live < / i > attribute set as "polite" if carousel is not in autoplay mode , otherwise "off" would be the value in autoplay .
< / p >
< p >
A slide has a < i > group < / i > role with an aria - label that refers to the < i > aria . slideNumber < / i > property of the < router -link to = "/locale" > locale < /router-link> API. Similarly <i>aria.slide</i > is used as the < i > aria - roledescription < / i > of
the item . Inactive slides are hidden from the readers with < i > aria - hidden < / i > .
< / p >
< p >
Next and Previous navigators are button elements with < i > aria - label < / i > attributes referring to the < i > aria . prevPageLabel < / i > and < i > aria . nextPageLabel < / i > properties of the < router -link to = "/locale" > locale < / r o u t e r - l i n k > A P I b y d e f a u l t
respectively , you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using < i > nextButtonProps < / i > and < i > prevButtonProps < / i > .
< / p >
< p > Quick navigation elements are button elements with an < i > aria - label < / i > attribute referring to the < i > aria . pageLabel < / i > of the < router -link to = "/locale" > locale < /router-link> API. Current page is marked with <i>aria-current</i > . < / p >
< h6 > Next / Prev Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > tab < / i >
< / td >
< td > Moves focus through interactive elements in the carousel . < / td >
< / tr >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Activates navigation . < / td >
< / tr >
< tr >
< td >
< i > space < / i >
< / td >
< td > Activates navigation . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Quick Navigation Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > tab < / i >
< / td >
< td > Moves focus through the active slide link . < / td >
< / tr >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Activates the focused slide link . < / td >
< / tr >
< tr >
< td >
< i > space < / i >
< / td >
< td > Activates the focused slide link . < / td >
< / tr >
< tr >
< td >
< i > right arrow < / i >
< / td >
< td > Moves focus to the next slide link . < / td >
< / tr >
< tr >
< td >
< i > left arrow < / i >
< / td >
< td > Moves focus to the previous slide link . < / td >
< / tr >
< tr >
< td >
< i > home < / i >
< / td >
< td > Moves focus to the first slide link . < / td >
< / tr >
< tr >
< td >
< i > end < / i >
< / td >
< td > Moves focus to the last slide link . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Dependencies < / h5 >
< p > None . < / p >
< / AppDoc >
2022-09-09 20:41:18 +00:00
< / template >
< script >
export default {
data ( ) {
return {
sources : {
'options-api' : {
tabName : 'Options API Source' ,
content : `
< template >
< div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="3" :numScroll ="3" :responsiveOptions ="responsiveOptions" >
< template # header >
< h5 > Basic < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="3" :numScroll ="1" :responsiveOptions ="responsiveOptions" class = "custom-carousel" :circular ="true" :autoplayInterval ="3000" >
< template # header >
< h5 > Circular , AutoPlay , 3 Items per Page and Scroll by 1 < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="1" :numScroll ="1" orientation = "vertical" verticalViewPortHeight = "430px"
style = "max-width: 400px; margin-top: 2em" >
< template # header >
< h5 > Vertical < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< / div >
< / template >
< script >
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
}
]
}
} ,
productService : null ,
created ( ) {
this . productService = new ProductService ( ) ;
} ,
mounted ( ) {
this . productService . getProductsSmall ( ) . then ( data => this . products = data . slice ( 0 , 9 ) ) ;
}
}
< \ \ / script >
< style lang = "scss" scoped >
. product - item {
. product - item - content {
border : 1 px solid var ( -- surface - border ) ;
border - radius : 3 px ;
margin : .3 rem ;
text - align : center ;
padding : 2 rem 0 ;
}
. product - image {
width : 50 % ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 )
}
}
< / style > `
} ,
'composition-api' : {
tabName : 'Composition API Source' ,
content : `
< template >
< div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="3" :numScroll ="3" :responsiveOptions ="responsiveOptions" >
< template # header >
< h5 > Basic < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="3" :numScroll ="1" :responsiveOptions ="responsiveOptions" class = "custom-carousel" :circular ="true" :autoplayInterval ="3000" >
< template # header >
< h5 > Circular , AutoPlay , 3 Items per Page and Scroll by 1 < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< div class = "card" >
< Carousel :value ="products" :numVisible ="1" :numScroll ="1" orientation = "vertical" verticalViewPortHeight = "430px"
style = "max-width: 400px; margin-top: 2em" >
< template # header >
< h5 > Vertical < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< Button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" / >
< Button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" / >
< Button icon = "pi pi-cog" class = "p-button-help p-button-rounded" / >
< / div >
< / div >
< / div >
< / div >
< / template >
< / Carousel >
< / div >
< / div >
< / template >
< script >
import { ref , onMounted } from 'vue' ;
import ProductService from './service/ProductService' ;
export default {
setup ( ) {
onMounted ( ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data . slice ( 0 , 9 ) ) ;
} )
const products = ref ( null ) ;
const productService = ref ( new ProductService ( ) ) ;
const responsiveOptions = ref ( [
{
breakpoint : '1024px' ,
numVisible : 3 ,
numScroll : 3
} ,
{
breakpoint : '600px' ,
numVisible : 2 ,
numScroll : 2
} ,
{
breakpoint : '480px' ,
numVisible : 1 ,
numScroll : 1
}
] ) ;
return { products , productService , responsiveOptions }
}
}
< \ \ / script >
< style lang = "scss" scoped >
. product - item {
. product - item - content {
border : 1 px solid var ( -- surface - border ) ;
border - radius : 3 px ;
margin : .3 rem ;
text - align : center ;
padding : 2 rem 0 ;
}
. product - image {
width : 50 % ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 )
}
}
< / style > `
} ,
'browser-source' : {
tabName : 'Browser Source' ,
imports : ` <script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js">< \\ /script>
< script src = "./ProductService.js" > < \ \ / script > ` ,
content : ` <div id="app">
< div class = "card" >
< p -carousel :value ="products" :num-visible ="3" :num-scroll ="3" :responsive-options ="responsiveOptions" >
< template # header >
< h5 > Basic < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< p -button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-cog" class = "p-button-help p-button-rounded" > < / p - b u t t o n >
< / div >
< / div >
< / div >
< / div >
< / template >
< / p - c a r o u s e l >
< / div >
< div class = "card" >
< p -carousel :value ="products" :num-visible ="3" :num-scroll ="1" :responsive-options ="responsiveOptions" class = "custom-carousel" :circular ="true" :autoplay-interval ="3000" >
< template # header >
< h5 > Circular , AutoPlay , 3 Items per Page and Scroll by 1 < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< p -button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-cog" class = "p-button-help p-button-rounded" > < / p - b u t t o n >
< / div >
< / div >
< / div >
< / div >
< / template >
< / p - c a r o u s e l >
< / div >
< div class = "card" >
< p -carousel :value ="products" :num-visible ="1" :num-scroll ="1" orientation = "vertical" vertical -view -portHeight = " 430px "
style = "max-width: 400px; margin-top: 2em" >
< template # header >
< h5 > Vertical < / h5 >
< / template >
< template # item = "slotProps" >
< div class = "product-item" >
< div class = "product-item-content" >
< div class = "mb-3" >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt ="slotProps.data.name" class = "product-image" / >
< / div >
< div >
< h4 class = "mb-1" > { { slotProps . data . name } } < / h4 >
< h6 class = "mt-0 mb-3" > \ $ { { slotProps . data . price } } < / h6 >
< span : class = "'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()" > { { slotProps . data . inventoryStatus } } < / span >
< div class = "car-buttons mt-5" >
< p -button icon = "pi pi-search" class = "p-button p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-star-fill" class = "p-button-success p-button-rounded mr-2" > < / p - b u t t o n >
< p -button icon = "pi pi-cog" class = "p-button-help p-button-rounded" > < / p - b u t t o n >
< / div >
< / div >
< / div >
< / div >
< / template >
< / p - c a r o u s e l >
< / div >
< / div >
< script type = "module" >
const { createApp , ref , onMounted } = Vue ;
const App = {
setup ( ) {
onMounted ( ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data . slice ( 0 , 9 ) ) ;
} )
const products = ref ( null ) ;
const productService = ref ( new ProductService ( ) ) ;
const responsiveOptions = ref ( [
{
breakpoint : '1024px' ,
numVisible : 3 ,
numScroll : 3
} ,
{
breakpoint : '600px' ,
numVisible : 2 ,
numScroll : 2
} ,
{
breakpoint : '480px' ,
numVisible : 1 ,
numScroll : 1
}
] ) ;
return { products , productService , responsiveOptions }
} ,
components : {
"p-carousel" : primevue . carousel ,
"p-button" : primevue . button
}
} ;
createApp ( App )
. use ( primevue . config . default )
. mount ( "#app" ) ;
< \ \ / script >
< style >
. product - item . product - item - content {
border : 1 px solid var ( -- surface - border ) ;
border - radius : 3 px ;
margin : .3 rem ;
text - align : center ;
padding : 2 rem 0 ;
}
. product - item . product - image {
width : 50 % ;
box - shadow : 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.16 ) , 0 3 px 6 px rgba ( 0 , 0 , 0 , 0.23 ) ;
}
< / style >
`
}
}
} ;
}
} ;
< / script >
