Slider for Testimonials position text box and navigation

[Scottlandia (Scott)]

Hi There

I’m have some issues making a testimonial slider.
The text elements are crashing into the navigation and don’t push them down.
I’ve added a Heading and Paragraph to a Div Block.

Many Thanks
Scott

---

Here is my site Read-Only: https://preview.webflow.com/preview/mark-chamberlen?preview=36603fdc362341021d13842cda221aa2

(how to share your site Read-Only link)

[Waldo (Waldo Broodrÿk)]

Hi @Scottlandia thank you so much for posting this question about the slider element in your site!

I made a quick video to show how to style those Arrows to sit at the bottom of your slider element:

Here are the steps written out in short:

• You will need to remove the margin from the icon styles which you created.
• Add a height and width to your slider arrow element (I went with 60px by 60px)
• Add a class to your slider arrow and set it to absolute position and bottom right for the right arrow and set the bottom margin to 0px, and -60px (if your arrow is set to 60px height) to position it under the slides
• Add a combo class to your left hand side slider and set it to the bottom left at absolute positioning and make sure that it retains the -60px bottom style

I hope that this is helpful for future slider designs

[Scottlandia (Scott)]

Hi @Waldo

This is great thanks, I’ve just done it now. Only other problem is the Slider Nav is cover the text.
Do I use the same absolute setting for this.

Thanks
Scott

[Waldo (Waldo Broodrÿk)]

Great question @Scottlandia that’s correct, just add some positioning style to the Slide Nav as well.

[Scottlandia (Scott)]

Hi @Waldo thanks for that - I’ve created a new class called “Testimonial slider nav” and added the absolute position.
I’ve added some on Tablet and looks okay. I’m having some issues on Mobile everything is now outside the container.
Many Thanks
Scott

[Waldo (Waldo Broodrÿk)]

Great question @Scottlandia can you please try setting your slider to a have a height of auto as well please?

Looks like that fixes the issue from viewport to viewport. You can likely decrease your div block class min-height from 400px to a different height as well.

[Scottlandia (Scott)]

@Waldo great thanks. I’ve done that now and working nicely.
Many Thanks for your help
Scott