mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-04-26 22:21:54 +02:00
64 lines
1.4 KiB
HTML
64 lines
1.4 KiB
HTML
|
{{ $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">
|
||
|
|
<!-- 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 }}"></div>
|
||
|
|
<div class="swiper-button-next swiper-button-next{{ $id }}"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.swiper-wrapper {
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-next:hover {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-prev:hover {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-pagination span{
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<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>
|