Help with setting up slider

Design help General
1

I’m working on a site, but am having trouble with the slider. I currently have two slides, each with three images on it. However, when I go into mobile view, the images just stack on top of each other, so that you only see one, and when you swipe to the right or left, you see one image from the next slide, but not the others. I’m thinking this is because I have the images in columns inside the slider.
This website is a good example of what I’m trying to go for: http://sliders.webflow.com/
The first slide you see is what I’m trying to do. It shows three at a time in desktop, but when you view it in mobile, it shows one at a time, and you can swipe through everything else

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

2

Hi there. The way that this slider is setup is a bit different than what you think.

It starts with 2 slides on desktop. Then 1 more slide gets added to mobile landscape and then 6 slides on mobile portrait. Images are moved from 3 on 2 slides to 2 images on 3 slides and finally 6 images to 6 slides. You can adjust this based on how many images you plan on using tho.

Hope that helps.

3

@QA_Brandon I tried doing that, but every time I deleted an image from the mobile landscape to switch it over to , it deleted it from the desktop as well. I was using columns, but switched over to using images inside of div blocks inside of a container, with the width of the blocks set to 33%. Any suggestions?

4

You cant delete them from the slides. You have to hide them and copy the images to the new slide.

Yes, if you delete them from the slides on mobile view it WILL delete them on the upper breakpoints.

Just use display: none.

5

Thank you! I’m still new at this so am figuring it out as I go. What you said was helpful though and I appreciate it

1 Like