How to embed an image slider within a tab

Design help General
1

Hello -

This is my first post to the Community, so I hope I have provided clear information about my problem.

I am trying to display gallery images from a collection list into a tab. I cannot see how to do this, it looks like I can only display a single image from the collection list.

Here is what I have done:

  1. I created a collection list for my client case studies
  2. I added a gallery image field so add multiple images to showcase the case study
  3. On the public web page, I added a tab component with the hope to show images from the gallery on one of the tabs - ideally as a slider
  4. I can’t find any tutorials online as to how to do this.

Here’s a link to the relevant page on the project (click the gallery link in the tab):
https://web-foundry-2020.webflow.io/case-studies/agi-membership-web-portal

Many thanks in advance!
Phil

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

The multi-image field can’t currently be used on anything but the collection template page. Not a list on another page. So that could be an issue.

You should also share your read-only link if you want more help.

3

Hi - thanks for replying.

My share link is here > Webflow - Web Foundry

I’m trying to display the multi image field within a tab view of the collection. You can see this by navigating to the case studies link in the footer and then viewing any case study.

Thanks,
Phil

4

Currently Sliders and the multi-image field are not compatible. You could use a Lightbox to render thumbnails that is based of the multi-image field instead.

5

Thanks again for the help and idea…
I just tried that but I can’t see how I can add multiple images into this lightbox as it’s bound to a field in my case studies collection and that field is “image” field, which only seems to allow one image (the multi image field doesn’t work as you pointed out earlier).

Am I missing something?

Cheers

Phil

6

It will work on the case studies template. Doe not matter that it is in a tab. Just add a collection list the multi image one and drop in a Lightbox to a collection item. Then bind it. Style to your preference. You should be able to follow along with the university page on the multi-image field. Has a section on Lightbox use.

7

Thanks - that worked out great. And I learned something new - you can next two collection lists within the same container element, which I didn’t realise.

Please take a look at the results.

Phil