• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
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

1.0K

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

Community Expert , Sep 20, 2021 Sep 20, 2021

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

Votes

Translate

Translate
Community Expert , 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 🙂

Votes

Translate

Translate
Contributor ,
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

Votes

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
Community Expert ,
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!

Votes

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
Contributor ,
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.

Votes

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
Community Expert ,
Sep 15, 2021 Sep 15, 2021

Copy link to clipboard

Copied

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

Votes

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
Contributor ,
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.

Votes

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
Community Expert ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

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

Votes

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
Contributor ,
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. 

Votes

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
Community Expert ,
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 🙂

Votes

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
Contributor ,
Sep 21, 2021 Sep 21, 2021

Copy link to clipboard

Copied

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

Votes

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

Votes

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