lovasoa
e20f641217
Allow setting image width and height in carousels, in order to avoid differently sized images to cause layout janking when going through them.
41 lines
2.4 KiB
Handlebars
41 lines
2.4 KiB
Handlebars
<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
|
|
<div class="card-body">
|
|
{{#if title}}
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader">{{title}}</div>
|
|
</div>
|
|
{{/if}}
|
|
<div id="_sqlpage_carousel_{{@component_index}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
|
|
<div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
|
|
{{#each_row}}
|
|
<button type="button" data-bs-target="#_sqlpage_carousel_{{@../component_index}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
|
|
{{#delay}}
|
|
{{flush_delayed}}
|
|
<div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
|
|
<img class="d-block w-100 object-fit-cover" alt="{{image}}" src="{{image}}" {{#if width}}width="{{width}}"{{/if}} {{#if height}}height="{{height}}"{{/if}} />
|
|
{{#if title}}
|
|
<div class="carousel-caption-background d-none d-md-block"></div>
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5>{{title}}</h5>
|
|
{{#if description_md}}<p>{{{markdown description_md}}}</p>{{else}}{{#if description}}<p>{{description}}</p>{{/if}}{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/delay}}
|
|
{{/each_row}}
|
|
</div>
|
|
<div class="carousel-inner">{{flush_delayed}}</div>
|
|
</div>
|
|
</div>
|
|
{{#if controls}}
|
|
<a class="carousel-control-prev" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
{{/if}}
|
|
</div>
|