Data: Panini Front Matter
Demonstrates: Orbit Image Carousel partial fed data from page Front Matter.
Corresponding Filename: data-101
An Orbit partial is defined using Panini variables ({{aria-label}}, {{image}}, and {{caption}}). These are then provided by the Front Matter of the page in which the Orbit partial is embedded. Any page, or, any partial embedded in a page, can consume data provided by a page's Front Matter through the use of Panini variables.
-
Image of China 1. -
Image of China 2! -
Image of China 3!! -
Image of China 5!!!
Front Matter
The images are added as front matter at the top of page on which they are displayed. Which is rather convenient.
---
aria-label: Images of china
image1: ../assets/img/orbit/china/china1.jpg
caption1: Image of China 1.
image2: ../assets/img/orbit/china/china2.jpg
caption2: Image of China 2!
image3: ../assets/img/orbit/china/china3.jpg
caption3: Image of China 3!!
image4: ../assets/img/orbit/china/china4.jpg
caption4: Image of China 5!!!
---
Partial Tag
The carousel is inserted on the page using a panini tag.
{{> orbit-image-carousel}}
The tag refers to the filename of the template used to format the data. The orbital template calls for four images (for each one an image url and a caption must be provided.)
Partial File
@ partials/orbit-carousels/orbit-image-carousel.html
<div class="orbit" role="region" aria-label="{{aria-label}}" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="{{image1}}" alt="Space">
<figcaption class="orbit-caption">{{caption1}}</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="{{image2}}" alt="Space">
<figcaption class="orbit-caption">{{caption2}}</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="{{image3}}" alt="Space">
<figcaption class="orbit-caption">{{caption3}}</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="{{image4}}" alt="Space">
<figcaption class="orbit-caption">{{caption4}}</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>