I’m trying to add a slider of client logos to my site but I want the height of each slide to be 150 pixels. Oddly, it will not go below 200 pixels. Is this the minimum height for a slider?? I can change the slider itself to be 150 pixels, but not the individual slides. Help!
- add read-only link
Here is the slider currently at a height of 200 pixels. When I change the slider height to 150 pixels, the individual slides do not change accordingly and the logos are no longer centered…
https://preview.webflow.com/preview/slider-test-b3f4a6?preview=2432fb13765b2774c2baaf2b357df94c
Start from Zero - use “real images” - and that’s it. You work with empty divs and background-images this is more complex to work like this (endlees styles).
Also more semantic/valid to use images!
http://buildawesomewebsites.com/blog/html-img-tags-vs-css-background-images
With images you set:
height: 100px;
width: auto;
Do this
1/5: parent: Slider
Set the height to 100%
2/5: child: mask (No extra styles/class) !!
3/5: child child: slide (only set width) + text-align: center (to center horizintaly the image)
4/5: child child child: Real images
Add “image” to this slide (Remember also to add alts) - set height + width:auto; (and extra margin top/bottom for some space around)
Result:
5/5: Space right/left
Now beacuse you have diff proportions for the logos add some padding for the slide wrapper (or padding for the images) - option 1 (add padding to the slide wrapper)
option2 : add padding-top/bottom for the images
Finish
#logos-slider #webflow-slider-height
1 Like
Perfect! Thanks so much!
1 Like