Problems getting slider to work

1

I can’t get my slider to work. If I hard code it , it works but I’m trying to use the gallery slider module and am having problems with that.

This is my layout code
image

and I have it running on this page (in the content area) https://hobartreiki.treepl.co/test

If I remove the for statement the images display correctly but don’t slide. Bootstrap says the first item needs the class active. Currently I have active on all slides. Is there a way I can specify the active class on the first slide only?

2

You could use forloop.first (The forloop object)

ie:

{% for item in this.items %}
<div class="carousel-item{% if forloop.first == true %} active{% endif %}">
...
</div>
{% endfor %}
3

Thanks James - that is a great solution for the active problem but my gallery still won’t load on the page. It must be something else causing the issue. It works if I hard code it but when I try to use the gallery/slider layouts it fails.

4

Its hard to diagnose with out all the code pieces in front of me… but for me, the biggest issue I have with that module is needing to call the gallery module… then the slides them selves… its too complicated. (My brain capacity is limited with 2 kids these days :slight_smile: )

What I do instead is just do a component call to the slides > then filter by the parentid of that particular slider… and just use a custom list layout as you need.

Does this make sense?

This is the component you are after https://docs.treepl.co/component-types/module-slide

EDIT: And then in your case, render to a collection in the list layout, so you can still do the forloop on the collection and get the first item active.

5

So like this:
{% component type: "module", source: "Slide", layout: "List", object: "collection", filterBy: "parentid", filterValue: "[THE ID OF THE SLIDER GROUP]" %}

1 Like
6

Your tags are wrong. You have {{this[‘ImageSrc’]}} It should be {{item[‘ImageSrc’]}} This goes for any of your liquid tags. If your code is in the module template than it should work. If this is on the page then you will have to add the component tag like James suggested.

2 Likes
7

Thanks James - I’ll try that. :slight_smile:

8

Thanks Rhatch - I’ll try that.