michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #499 from mirceanton/feature/carousel-autoscroll-randomize

Browse source 
✨ Shortcode `carousel`: add optional parameter for scroll duration
This commit is contained in:
Nuno Coração 2023-02-03 20:46:36 +00:00 committed by GitHub
commit 18cfa8e476
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
exampleSite/content/docs/shortcodes/index.md
View file

@ -129,6 +129,7 @@ Call to action
| ------------- | ----------------------------------------------------------------------------------------------------------------- |
| `images` | **Required.** A regex string to match image names. |
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) |
<!-- prettier-ignore-end -->
**Example 1:** 16:9 aspect ratio and verbose list of images
@ -142,10 +143,10 @@ Call to action
**Example 2:** 21:9 aspect ratio and regex-ed list of images
```md
{{</* carousel images="gallery/*" aspectRatio="21-9" */>}}
{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}}
```
{{< carousel images="gallery/*" aspectRatio="21-9" >}}
{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
<br/><br/><br/>

2
layouts/shortcodes/carousel.html
View file

@ -2,6 +2,7 @@
{{ $id := delimit (slice "gallery" $time) "-" }}
{{ $aspect := default "16-9" (.Get "aspectRatio") }}
{{ $images := .Page.Resources.Match (.Get "images") }}
{{ $interval := default "2000" (.Get "interval") }}
<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
@ -23,6 +24,7 @@
<div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
style="background-image:url({{ . }})"
data-bs-interval="{{ $interval }}"
></div>
{{ $num = add $num 1 }}
{{ end }}