Need help ranging bootstrap carousel slides

You can see what I have so far on the github: GitHub - Riokei/LawnSite: Website for a lawncare business.

Basically I’m creating a reviews slider that shows 3 reviews per slide, I did a bit of research but I’m not quite sure the easiest way to make sure that’ll it’ll fill out the slides properly, begin a new slide, and somehow I need to make sure that the first slide gets the active class. There’s also the “data-bs-iinterval” thats one thing on the first slide, another on the second, and missing on the last slide. Should I even bother trying to template this? I’ve used this feature on more simpler things, so I’m trying to take advantage of this here as I’m sure it’d be great for the reviews but maybe I’m over complicating this.

What is your question?

How do I make the param? I have made some others but this one I’m not sure how to range through data files for the reviews.

structure

data/
└── reviews/
    ├── 1.json
    ├── 2.json
    └── 3.json

template

{{ range site.Data.reviews }}
  {{ .foo }}
{{ end }}

Okay so I can change the text of the reviews with that but I can’t break off into different slides.


Should I just post my code here or?

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Make sure that you push your latest changes (e.g., ranging through the data directory).

Sorry about that, you should be able to see the latest changes

1 Like

To clarify, should each slide contain 3 reviews, or should there be only 1 review per slide?

3 per slide yes. Sorry for the late reply

You’ll need an outer loop for the slides, and an inner loop for the reviews

{{ range seq 1 3 (len site.Data.reviews) }}
  ...
  {{ range seq . (add . 2) }}
    {{ with (index site.Data.reviews (string .)) }}
      {{ .des }}
    {{ end }}
  {{ end }}
  ...
{{ end }}
1 Like

Okay the html its generating looks about right but now I’ve just got 2 last issues, on the first carousel-item it needs the active class but I need to somehow remove that on the next 2 slides it generates. Then theres a data-bs-interval value thats 10000 on the first, and should be 2000 then 0 on the last two any idea how I can set those up? Thanks so much for all the help so far btw!

Edit: I still haven’t quite figured it out but I think I need an if/else statement. “If the first in the sequence do ‘carousel-item active’ and after that do 'carousel-item” I’ve tried a few things but I can’t quite figure out the right syntax

{{ range $k, $_ := seq 1 3 (len site.Data.reviews) }}
  {{ $class := "carousel-item" }}
  {{ $data_bs_interval := "10000" }}
  {{ if eq $k 0 }}
    {{ $class = "carousel-item active" }}
  {{ end }}
  {{ if eq $k 1 }}
    {{ $data_bs_interval = "2000" }}
  {{ end }}
  {{ if gt $k 1 }}
    {{ $data_bs_interval = "0" }}
  {{ end }}
  <div class="{{ $class }}" data-bs-interval="{{ $data_bs_interval }}">
    {{ range seq . (add . 2) }}
      {{ with (index site.Data.reviews (string .)) }}
        {{ .des }}
      {{ end }}
    {{ end }}
  </div>
{{ end }}
1 Like

Thank you so much!

1 Like

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