▼
Streaming live at 10am (PST)

Image Slider Layout

Design help General
#1

Need some assistance on the layout for my past work image page.

I used the following to produce the desired before/after type image slider.
https://preview.webflow.com/preview/magicslider?preview=c21f6070136b2dbe80a623a9c97b4a8b

First issue is in my designer view I dont actually see the images/container apart from the small empty HTML embed container but when I view the live website after publishing the image slider works as intended [Live page screenshot: https://puu.sh/FpXZ1/07ddf9d6b3.png]

Second issue being the main one in regards to layout, I’m wanting to have a 2 column layout just like the original [https://magicslider.webflow.io/] with alternating rows of static images & image sliders. I’ve tried multiple things however ends up just displaying the one individual image slider even though multiple have been added to the page. Any help would be appreciated and can provide more information if needed.

Example of total page layout desired:
[ HEADER ]
[ HEADING ]
[ PARAGRAPH ]
[ IMAGE SLIDER ] [ IMAGE SLIDER ]
[ STATIC IMAGE ] [ STATIC IMAGE ]
[ IMAGE SLIDER ] [ IMAGE SLIDER ]
[ STATIC IMAGE ] [ STATIC IMAGE ]
etc
[ FOOTER ]

Here is my site Read-Only: https://preview.webflow.com/preview/flawless-pressure-cleaning-solutions?utm_medium=preview_link&utm_source=designer&utm_content=flawless-pressure-cleaning-solutions&preview=a68f2e86ff4d29bff03528f6ba07b0c8&pageId=5e7ef89794ac47db83c9aa15&mode=preview

#2

Not sure how but first issue is now resolved & can now see the stacked images in my designer view, still need help on the layout/placement of the images as currently I can only see 1 image slider even though i have placed 2 in my designer & published.

#3

bump, any help on this

#4

Guessing here what your goal is.
I made your Container 2 a Layout/Display/Column and created a new embed and cut and pasted the 3rd line HTML into the new embed.

image
image662×555 95 KB

#5

Sorry for the late reply, did not receive any notifications and only just saw it now. Tried your method & nothing different happens for me on my live site. Maybe this image illustrates my idea better of what I want to do with the page.

2 columns, 1st row with the slider images, 2nd row with normal static images (no slider just 1 image), then alternating that pattern so 3rd row = slider images, 4th row = static images, etc etc.

#6

From what you are describing, it seems too simple.
If I may imaging more deeply; a before and after slider?
I went ahead and made the simple thing just in case that’s what you are looking for.

image
image998×731 304 KB

Rinse and repeat for the second row.

#7

I already have the slider that I want made, should be visible in the live website. https://www.flawlesspressurecleaning.com.au/past-work you can see it already how i want it. Issue is I cant seem to add multiple of these, currently in my code i have 3 on the page but on the live website if you see, you can only see 1, as well as it ruining the page formatting as the footer is somehow mixed in at the bottom of the image.

Here’s the image slider that I have used in action in case I havent made it clear:

The solution im looking for is just arranging the slider I have already on the page but laying it out as shown in the previous posts image in 2 columns, alternating each row with slider image and static images.

#8

Getting closer!
In my previous picture, at Column 1 and 2, replace my slider with your slider in each column. I can’t test because your slider is not in the Read-Only.

#9

Ok followed your previous picture, still is only showing 1 slider for some reason & has also messed up my footer. With your instructions I made a container with 2 columns, and then a 2nd container with another 2 columns and placed the same slider in all 4 total columns and it’s just displaying the 1 image and has ruined the footer placement/dimensions/etc. Recorded some gifs below to illustrate further.

Current live view:

Current designer view:

Read-Only: https://preview.webflow.com/preview/flawless-pressure-cleaning-solutions?utm_medium=preview_link&utm_source=designer&utm_content=flawless-pressure-cleaning-solutions&preview=a68f2e86ff4d29bff03528f6ba07b0c8&pageId=5e7ef89794ac47db83c9aa15&mode=preview

#10

Okay, one last attempt then I will concede.
I used 2x1 grid this time. :crossed_fingers:
I can’t test the end result because I’m working with the read-only. So what I see is just the pictures and the three lines of embed. Not an excuse, just information.
I don’t know what could have happened to the footer, but maybe the right margins for the text should be 0. Keep in mind that these two text blocks are the same class name.

image
image211×509 8.9 KB

#11

Layout is exactly how i want it in designer view, however the 3 other slider images arent even showing up for some reason in the live view even though i see them in my designer view.

Live View:

Designer View:

#12

Maybe one more thing.
Try naming each slider a different class. i.e. HTML Embed 01, 02, 03, 04 respectively. The slider code needs to be updated too. Might have to have four different slider codes.

#13

Renamed the sliders + changed images on all the sliders, still same result. Only displays the 1 slider even though I’ve added 2 rows of 2 sliders onto the page. Footer is still somehow also broken.