How to implement a text-based carousel

This is a bit of an open-ended question where I’m looking for suggestions on how to approach this problem

I have 12 book quotes, and I’d like to show 4 book quotes at the same time using a carousel. By clicking on an arrow, the following 4 book quotes will be shown and so on.

These 12 book quotes are found in quotes/_index.md and structured as

[[quote]]
author = ""
book = ""
text = ""

I can show all of these quote by ranging through them, but conceptually I don’t understand how I would limit only showing 4 at a time.

If I use first 4, then only the first four will be shown, how would I show the next batch? This can be done with multiple range statements.

<!-- batch 1 -->
{{range .Params.quote | first 4}}
  {{.}}
{{end}}

<!-- batch 2 -->
{{range .Params.quote | after 4 | first 4}}
  {{.}}
{{end}}

<!-- batch 3 -->
{{range .Params.quote | after 8 | first 4}}
  {{.}}
{{end}}

But this seems not right. Any suggestions, pointers on this? Thanks.

I assume I’ll need to use javascript to solve this, but that’s more for the carousel functionality.

  {{ $q :=  .Params.quote }}
  {{ range $i := seq 0 4 ( $q | len) }}
    {{ range $j := seq 0 3 }}
      {{ with index $q (add $i $j) }}<br>
        {{ .author }}<br>
        {{ .book }}<br>
        {{ .text }}<br>
      {{ end }}
    {{ end }}
  {{ end }}

The inner range is a group of 4.

2 Likes

Thanks! You’re super helpful as always. :slight_smile:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.