Streaming live at 10am (PST)

Is grid breaking slider functionality? How to Make Vertical Slider into a Horizontal Slider? [solved]

#1

I’m working on series of 3 slides
Product Shot Left | Hero / Customer Shot Right

image

Unfortunately the sliders 2 and 3 are not displaying into viewport :frowning:

Preview link:
https://preview.webflow.com/preview/atxfoodco-4-0?utm_source=atxfoodco-4-0&preview=721a374437680d13d436058df6b3ad71

Preview Page:
https://atxfoodco-4-0.webflow.io/


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

#2

I don’t think that the slider component supports grid. If you’re just putting 2 things side by side, I’d suggest using columns or flex divs.

1 Like
#3

@DFink
I have a grid section

I have slider component on top row of grid section

I have 3 sliders in sldier component

each slider has 1 column 2 rows
column 1 = hero product shot
column 2 = hero customer shot

slider 1 is working as intended
slider 2 is not working as intended
slider 3 is not working as intended


are you suggesting remove grid from section and rework into flexbox?

#4

Here’s what you want to do.

  1. General rule you’ll want to remember with the webflow slider component. Never apply any styling to the divs called “slide1” “slide2” etc. Only put a div inside of those and style that. Things get funky the moment you add any styling to the actual slide.

  2. Select the slides (you’ve named them “slide”) and remove the class name you given them.

  3. Selected the div inside of slide you’ve named “Home Hero Upper” and give it a height of 100%. This fills the entire height of the slide.

that should do the trick.

2 Likes
#5

@Port_of_Folio
Thanks I rearranged divs and updated flex and removed slider names and now its working like a charm thank you!!

1 Like