Open
Description
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@2/fullscreen.css">
<script src="https://unpkg.com/flickity-fullscreen@2/fullscreen.js"></script>
<style>
.carousel-cell {
display: block;
}
/* .is-fullscreen added to carousel when fullscreen
size cells to full height when fullscreen */
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
</style>
<!-- Ranges through content/photos/*.md -->
{{ range .Pages }}
<div class="max-w-lg">
<a href="{{.Permalink}}">
<h2>{{.Title}}</h2>
</a>
<h5>{{.Date.Format "2006-01-02"}}</h5>
<div class="carousel"
data-flickity='{ "imagesLoaded": true, "percentPosition": false, "fullscreen": true }'>
{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
{{ range . }}
<img class="carousel-cell max-w-full w-auto h-auto m-auto" src="{{ .RelPermalink }}" />
{{ end }}
{{ end }}
</div>
Metadata
Metadata
Assignees
Labels
No labels