Few tips for the native slider component
- Not vertically responsive. You’ll have to use a fixed pixel height on the main component. Determine how much room you need for your longest quote. (#8 in your case, so about 250-300px). Luckily, your quotes are somewhat similar in length.
- Never apply styles to the individual slides themselves. Remove the class you’re using now.
Instead, put a div inside of the slide and give it a width & height = 100%, then design within that div. - In your case, the div inside of the slide will use Flexbox with Direction = “Vertical” and apply horizontal & vertical centering. This will keep all quotes centered to each other and with the arrows.
Remove the 100px of padding you’ve added to the bottom of the arrow divs and your arrows will center with the quote text.
Last, for the smaller breakpoints, you’ll need to change the pixel height of the main slider component, allowing enough room for slide #8 to fit all text.
You’ll change the width of the slider arrow divs at each breakpoint. You’ll need smaller on phone views.
You’ll want to remove the 40px of margin you’ve added to the icons. If you want the arrows to be farther away from the text, you can use more padding on the div used in your slide.
Be sure to test your longest quote within each breakpoint by using the viewport width adjuster. I’ve attached a screen grab showing this useful tool.
