Make slider appear from right in stead of left

Design help General
1

Hi there guys,

For a new project I’m creating a timeline by using the slider element. I’ve got the styling correct but the only thing I would like is to make slide 2 appear from the right instead of the left. Is there a way to make the slides appear from the right instead of the left.

Link: https://preview.webflow.com/preview/zdhc?utm_source=zdhc&preview=c25171830782a381d45237850fe6b78e

It’s about the roadmap slider on the about page.

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

2

I did the poor man’s solution for that once.

  • give all the slides a “slide” class
  • select the complete slider element, make a -180° rotation on Y (yeah…)
  • select one of the slide element with the slide class, make it -180° too so it goes back to normal
  • select the element with the dots, and depending how you want them to behave, -180° them too, or not.
  • select the elements with arrows, adjust their z-index depending on if they disappear at one point or not
  • adjust z-index for slides content if needed too

I know, that sounds stupid, but then your slider works the other way around.

1 Like
3

Thanks @Vincent. you’re my saviour :slight_smile:

It worked only I had to do some small changes:

  • Give a children perspective to the slider
  • Rotated the mask (instead of slider) -180 (no children perspective)

The only thing is that the font and the cards look less crisp. They become a little but blurred. Do you maybe have an solution for that as well?

4

Makes sense! Now you can even move your slide element forward on Z and get a cheapo nice parallax effect :smiley:

5

Have you had to move them on the Z axis? That’s because of the 3D space and they’re not strictly at 1:1 anymore… I thought it was possible to do it without adding a perspective, which implies the 3D rendering.

6

Thanks for that @Vincent. I haven’t done much to my Z-axis but to display the cards rotated I needed to add a children perspective on my wrapper. Could you have a quick look if it is possible any other way?

7

I only rotate the arrows and put them in the “wrong” place so left goes right and otherway…