How to create a simple clickable slider using one component in XD?

Participant ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

I cannot understand how to order my layers for teh animate to work. I am trying to createa an slider with content that advances using a sigle click. I have seven slides. Below it are indicators of what slide the user is on. The contraols are cherons toteh left and right sides that a are clicked to advace.

 

I have been crushing my head trying to figure it out. Please help. Thank you.

 

<Title renamed by moderator>

TOPICS
How to

Views

603

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Adobe Community Professional , Sep 20, 2021 Sep 20, 2021
Hi Syeds, made a short video on the process. Here you go

Likes

Translate

Translate
Adobe Community Professional , Sep 21, 2021 Sep 21, 2021
It's not the easiest thing to figure out, and it might help somebody else as well, so it's all good  Make sure you make your slides and everything before you make the component. Adding more slides inside the component might be a headache, so try to avoid it. If you do so, you will be making that slider group bigger. It should be fine, but I don't know how auto-animate will handle it. Components don't really like being modified 

Likes

Translate

Translate
Participant ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

I do not want to duplicate my artboard 7 times. There should be a way to do it within one component

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

Hi Syeds, I made a sample for you with 3 slides. Here's the prototype, and here's the .xd file so you can see how it's set up.

 

Hope that helps!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

Thank you for your time. I hope it was not a big task. I will look at the XD file and see whart i was doing wrong.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

No worries, let me know if you're still having trouble with it 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

@Spas K. 

I am having difficulty recreating the interface to accomodate more or less cards. Do you think you can write down the steps? Perhaps I can follow them and appy it to different instances. I am new to Adobe XD and realizing that so much is dependent on the layer order/grouping. I am having to back-track on so many interactions because of it. Thanks.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

Hi Syeds, made a short video on the process. Here you go 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

@Spas K. Thank you again. I hope I am not too much of an idiot after reviewing this video. I appreciate your continued support. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

It's not the easiest thing to figure out, and it might help somebody else as well, so it's all good 🙂

 

Make sure you make your slides and everything before you make the component. Adding more slides inside the component might be a headache, so try to avoid it. If you do so, you will be making that slider group bigger. It should be fine, but I don't know how auto-animate will handle it. Components don't really like being modified 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

I did it. The visuals worked for me. Thank you very much again 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

LATEST

We are glad that the sample provided by our expert helped you. Please feel free to reach out to us in the future for any query related to XD.

 

We would be happy to help.

 

Thank you, @Spas K. for your continous contribution to our community. You rock. 🙂

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines