Dynamic project slider

Design help CMS
1

I made a website with a gallery of thumbnails. When clicking on a thumbnail it opens a slider section from the right with some project text on the left and a slider with pictures of the project on the right of the section.

https://preview.webflow.com/preview/dieraummacher?preview=4ce9b4d24c13a67adc85edcd56cc2172

Now the client should be able to add a new project thumbnail to the gallery and add the project text and pictures which will be displayed in the slider when clicking on the respective project thumbnail.
Is this possible?

Any help is highly appreciated. I’m also open for paying for the help.

Thanks in advance

2

What you are asking for:

  1. Display a list of thumbnails

  2. Clicking on thumbnail, animate section from the right, this section will have two columns (text content, slider)

  3. Clicking on thumbnail will trigger respective slide

You should provide design to help us visualize. One closed state and one open state when user has clicked thumbnail. Your share link is useless as it is a blank canvas.

3

Thanks @samliew for your reply.
Sorry, the shared preview has been working on my side. I set the init jquery script inactive. I hope it displays now.

https://preview.webflow.com/preview/dieraummacher?preview=4ce9b4d24c13a67adc85edcd56cc2172

The design has been done and also the animation. I’m only asking for the CMS possibilities.

Yes, to all your summary except that the text column on the left is for the whole project and doesn’t need to change with every slider image.

4

Seen your site at http://dieraummacher.webflow.io

Here are my answers:

  1. Display a list of thumbnails

    Yes, simply have a main image field for your projects collection. Use background-image to display images from CMS. Settings for background image has to be: Cover, Center, No-repeat.

  2. Clicking on thumbnail, animate section from the right, this section will have two columns (text content, slider)

    You want to add CMS images into the slider. Currently, the lightbox and slider are not CMS-enabled. You can follow this workaround instead.

  3. Clicking on thumbnail will trigger respective slide

    You will need custom JavaScript for this. An example would be Catalogue Single. Once you have the thumbnails on the left set up, reply back so I know you are ready to proceed.

1 Like
5

Hey thanks a lot @samliew. This is really helpful.

But would it be possible not only to trigger a single slide with clicking on a thumbnail (as in the squarerooms example) but several images which all belong to the same project (thumbnail)?

And as I understand with the mentioned workaround it is only possible to add a set amount of slides.

6

Once all the elements are set up on your website I will then be able to advise you.

7

Ok, I got the thumbnails set up and also the slider according to the workaround above mentioned.

8

I don’t see the slider and thumbnails in your published site

9

oh sorry, forgot to publish. now it is.

10

There are three slides, what about the three thumbnails? What are you trying to do here?

11

this is what I want to do. one thumbnail represents one project but one project has several pictures in the slider. is this possible?

12

I’m only offering help for #3. For #2, see:

13

That’s alright I’ll try to follow it up from where you will leave it.
I uploaded two projects now. Can you help me with #3 as I have two thumbnails now?
https://preview.webflow.com/preview/dieraummacher?preview=4ce9b4d24c13a67adc85edcd56cc2172

Thanks

14

Need clarification.

Clicking on both thumbnails will open up the same div, display the same text, and display the same slider.

The only difference is that you want the first thumbnail to make the slider show the first slide, and second thumbnail to make the slider show the second slide?

15

yes, but text should also be different. the text as well as the pictures are in two different items of the same collection.

16

In that case, you will need a different div for each thumbnail, with a different interaction as well. This is not feasible.

I suggest you use the single collection template page instead (right at the bottom of all pages).

17

Instead of the div which slides in from the right?
If yes, is there any workaround to still get the same effect? (that’s how the client wants it)