p-carousel component allows related or similar content to be consumed on a step by step basis with a better
overview than just showing them in a grid or as a list. The reason for this is, that only a certain amount of slides is
visible at the same time.p-carousel's content has to be divided into multiple parts or slides.
The amount of slides visible can be specified on a per-breakpoint basis.
width prop, which is in sync with the Porsche Grid.If you need to use a specific property dynamically, please open a feature request.
Some heading
Slide 1
Slide 2
Slide 3
Slide 4
<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-carousel heading="Some heading">
<div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
Slide 1
</div>
<div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
Slide 2
</div>
<div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
Slide 3
</div>
<div class="grid place-content-center h-[150px] bg-surface prose-text-sm">
Slide 4
</div>
</p-carousel>
<script>
</script>
</body>
</html>