michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-02-02 03:22:33 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #442 from mirceanton/feat-426/slider_shortcode

Browse source 
✨ shortcode slider
This commit is contained in:
Nuno Coração 2023-01-16 23:20:50 +00:00 committed by GitHub
commit 627062024d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -388,4 +388,31 @@ Blowfish implements a sub-set of TypeIt features using a `shortcode`. Write your
{{</* github repo="nunocoracao/blowfish" */>}} {{</* github repo="nunocoracao/blowfish" */>}}
``` ```
{{< github repo="nunocoracao/blowfish" >}} {{< github repo="nunocoracao/blowfish" >}}
## Swiper
`swiper` is used to showcase multiple images in a limited space, in an interactive and visually appealing way. It provides a standar swiper/slider/carousel feature, allowing the user to slide through multiple images while only taking up the vertical space of a single one.
<!-- prettier-ignore-start -->
| Parameter | Description |
| --------- | ------------------------ |
| `id` | [String] A unique identifier so that multiple sliders can work in the same page |
| `pattern` | [String] Go glob to match image names |
<!-- prettier-ignore-end -->
{{< alert "circle-info" >}}
It doesn't really matter the value set for the slider `id` as long as each slider in a given page has a unique identifier.
{{< /alert >}}
<br>
{{< alert "circle-info" >}}
A good resource for testing your go glob string is [this url](https://www.digitalocean.com/community/tools/glob?comments=true&glob=img%2F%7Biac%2Ck8s_all%7D.png&matches=false&tests=img%2Fiac.png&tests=img%2Fk8s_all.png)
{{< /alert >}}
**Example:**
```md
{{</* slider id="1" pattern="{abstract.jpg,featured.png} */>}}
```
{{< slider id="1" pattern="{abstract.jpg,featured.png}" >}}

46
layouts/shortcodes/slider.html Normal file
View file

@ -0,0 +1,46 @@
{{ $images := .Page.Resources.Match (.Get "pattern") }}
{{ $id := .Get "id" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper swiper{{ $id }}">
<!-- Additional required wrapper -->
<div class="swiper-wrapper items-center">
<!-- Slides -->
{{ range $images }}
<div class="swiper-slide swiper-slide{{ $id }}">
<center>
<img src="{{ (.Resize "x300").RelPermalink }}" class="my-0 rounded-md">
</center>
</div>
{{ end }}
</div>
<!-- pagination -->
<div class="swiper-pagination swiper-pagination{{ $id }}"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev swiper-button-prev{{ $id }} hover:text-neutral"></div>
<div class="swiper-button-next swiper-button-next{{ $id }} hover:text-neutral"></div>
</div>
<script>
new Swiper('.swiper{{ $id }}', {
direction: 'horizontal',
centeredSlides: true,
loop: true,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination{{ $id }}',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next{{ $id }}',
prevEl: '.swiper-button-prev{{ $id }}',
},
});
</script>