Slider for one specific page appearing on all pages?

Hi friends,

I’m really stumped on this one. On my project, there are several “Events” pages, one for the United Kingdom, one for Slovenia, one for North Carolina, etc. On each page, I want to put a slider with 3-4 images of the location/hotel.

On the UK event page, I put a slider with 3 images of Dartington Hall, UK. I named the slider and the slides “UK slider” / “UK slide 1-3.”

When I switch to Slovenia, the UK slider is already there. If I delete it, it deletes the slider on the UK page. If I put in a new slider called “Slovenia slider” and add images of Slovenia, this slider now appears on the UK page.

I’m not sure what I’m doing wrong, but this is driving me nuts. Can anyone advise?
From the preview link below, you can navigate to the UK/Slovenia pages by scrolling halfway down the Home page and selecting “Read More…” for United Kingdom 2018 or Slovenia 2018.

Thank you!

https://preview.webflow.com/preview/forestinternational?preview=6db91d270a3d32e0a9e080b57fe8b106


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

It’s a Collection Template page. It will duplicate if you don’t bind the database to the “Get image from Events”. This is asking where to grab the images from, and which field. You’ll need to add this on the template page. It will then pull all images into each collection item.

This solution works for me now. However, when I make adjustments to one Slovenia image, say changing the positioning of the image, it affects the corresponding UK image as well. Also, on the UK page, the slider and slides are all named “Slovenia slider” / “Slovenia slide 1-4.”

What should I do? Simply manually rename them so that adjustments to one page don’t affect the other?

It’s going to be from the beginning. You’ll have to delete the class name for the slider to start over.

  • Updated
    Only click on the Slider name - Layer just above the Mask layer.

Once you delete the class name, leave it blank. Go to United Kingdom and delete slide 5. Then go to Slovenia and it worked for me now.

Didn’t work for me : /
Any changes I make to the UK page immediately affect the Slovenia page.
I deleted the Slider name layer and renamed it from “Slovenia slider” to “UK slider.”
Made relevant image changes there.

When I switch back to Slovenia, the slider is now named “UK slider.”
Images remain distinct. However, zooms/adjustments made to UK Slide 1 affect Slovenia Slide 1.

Don’t rename the slider. Delete the class name and don’t name it. Go to Style Manager and Clean Up all styles. If you delete a name, then turn around and add a name that’s in the manager it will revert back. Here I’ll post a short video, one sec… There’s nothing wrong with the images, they’re working just fine. What are you seeing? You didn’t need to do anything it’s working. Use the dropdown to see the different collection pages.

http://www.screencast.com/t/GCIXWhML

Your patience is saintly; I really appreciate the help.

Okay, I deleted the class names for the slider and the slides, so that they all now have no class names.
I went and cleaned up all styles.

But no matter what I do, every single change I make to one slider affects all of them. They are all the same slider. Although the images they’re pulling come from different collections, the slider itself is uniform across all pages. This means I cannot adjust the positioning of Slide 1 without all Slide 1’s adjusting. (in your video, you can see that some of the images need adjustments really bad)

How can I detach all the sliders from each other so that no changes made to one slider affects any other pages?

Haha! I just showed you that the changes don’t happen for me, by clicking the other page template. You can see all the images are different. How are you getting the same images, I was in your site like you :grinning:

Republish and resend the read-only link, I’ll look again for ya.

https://preview.webflow.com/preview/forestinternational?preview=6db91d270a3d32e0a9e080b57fe8b106

There is the new link

I’m not getting the same images. All the images are different now. All drawn from different collections.
The problem is, if I resize/change the position of Image 1 for UK, it does the same change for Image 1 Slovenia. Changing any image settings on one slide changes ALL copies of that slide across all pages.

Yes! Now it will do that because you’re using a Collection Template. You’ll need to customize the css styles for each individual page which is NOT ideal, and goes against the whole purpose of cms collections.

And all the images are different sizes, so you’ll get difference. Make the slider size width: 900px to test it out.

Okay I tested 900px for the entire slider, but on Slovenia image #2, it’s 800px width

  • Updated
    For the slider don’t use 900 px as a final, instead use 85% (which covers the lower 800px sized image). Then click arrows - center elements toggle to center the slider. This way it’s responsive.

Okay, I will try this. (sorry I was out of office for part of the day). I really appreciate your support.

In the future, would it be wiser for me to adjust the image sizes so they’re all uniform before uploading them to collections? Or is there a way I can create a slider that completely avoids using collections so that each slider on each page is totally customizable?

Also, another problem: if I want to adjust one image, I have to:
-select the slide
-click the Style (brush) button
-scroll down to Background and click Add Background Image
-make the adjustments here

However, what I notice is, it applies a new layer to the image, and the slide itself is renamed (for example, from Slide 1 to Slide 2).

Is there another way to make changes to the image’s position? I feel like I’m going about this wrong.

Question 1:
Yes! It’s always better to adjust photos in PS, Affinity, Corel or any other photo program before uploading into Webflow. I usually create one photo template in PS or Affinity. Use the dimensions I plan to use and drag all my photos individually. FYI, in PS CC 2018, if you create a document with specific dimensions, then save it, don’t open all the photos from the file menu, alternatively just drag them from your folder onto the canvas. Photoshop will automatically center the image and constrain it within the frame. You click enter, there will be a new layer with the photo. Repeat each time, then save the file as a collection with all your images. Also, make the file 16bit instead of 8. Let me know if I have this wrong, I’m pretty sure it does this with photos, I know vectors do.

Question 2:
Oh no, don’t do that. Just click the slide 1 layer and add an Image Component. Sure it’s possible and some like it, but I prefer adding images as their own. To me background images are difficult to deal with and you can’t style them at all! Add image components in each slide layer, and you can position them much better and styles can be applied to all images with the same class - if you like. Give that a try.

You’ve been a superstar, thanks for all the help.
Can you clarify one thing for me please? When you say “add an image component” in each slide layer, where do I find it? I checked the Style menu and the Add Element menu for image component, and didn’t find one. I assume I’m misunderstanding your terminology. If it helps, I’m not a webdev at all (as you might have guessed!) so I don’t know all the lingo.

Oh sorry, the image element on the left side.

Thanks mate, I’ll give this a try.