Hello there,
Need some help with creating a slider like bellow:
Link: https://www.dji.com/
I wish to create the same where you have the option to click on the text on the left to change slide.
Thanks. 
Hey @Grant1
I moved your post to the proper category and rewrite the question title to better clarify what you are wanting.
1 Like
Thanks Gilson!
Appreciate the help.
So, although it’s possible to reproduce that effect using the Slider Component, you would need some custom code to make it advance using the text as a link.
I think it’s easier to reproduce that creating a custom slider by yourself using the interactions.
You can do something like this:
• First create a Div, call it something like Slider and give it a position: relative;
• Nest inside the Slider 2 other divs: Slides and Text Links;
• Give the Slides class position: absolute, top: 0, left: 0, right: 0 and bottom: 0;
• Nest inside the Slides, a div Slide (duplicate it as much as you want). Give the Slide class position: absolute, top: 0, left: 0, right: 0 and bottom: 0;
• Put the text you want inside the Text Link and give it either position: relative or position: absolute, with a z-index: higher than the Slides. It can be as little as 1.
Thats the basic structure.
And for the interactions, you can create one for each slide and make it something like:
• When clicked, show the corresponding Slide with a display: block, display: flexor something like that;
• Also display: none all of the other slides;
• Besides the display, you can set any animations you like;
• Give each text link a corresponding Slide animation and you are done.
Yes, that’s exactly what I meant
I have attempted to do this but to no avail.
I think i can get my head around the slides but not sure how to animate the text as on DJI website. The slide in use is highlighted and enlarged when clicked.