More flexible layout?

[desiv]

First off, it's a great library! Really easy to use and implement! I've managed to make a custom content, but was wondering if it's possible to change the layout of the buttons and step counter? For example I would like to change the step counter from numbers to something visual like circles.

I've got at the moment

But would like to have

[tnicola]

Hi @desiv ,
Thank you!I'm really glad that someone appreciate it!That's a great idea. I think I will add some customizable templates for the buttons and the step counter letting you using your own styles and components! Maybe this could be the solution that @arorakanav11 was looking for.

[pabloborrego93]

Hi @tnicola ,
First of all, congratulations for your component! It's being really useful for me.
Same than @desiv, I need to change the layout of the buttons NEXT, PREV and DONE.
For this reason, i'm really interested in that issue.
I've seen that it's in progress now. Could you estimate how many time you have left to finish the task?
Thank you so much in advance.

[tnicola]

Hi @pabloborrego93 , thank you!
This task should be done by the start of the next week more or less. I'll update you when the feature will be finally released.

[tnicola]

This new feature has been released with the new version of the library (v 2.2.1). You can now use your custom buttons and/or counter:

<div joyrideStep="step1" 
     [prevTemplate]="prevButton" 
     [nextTemplate]="nextButton"
     [doneTemplate]="doneButton"
     [counterTemplate]="counter">
     I'm the target element.
</div>
<ng-template #prevButton>
   <my-button>Go back!</my-button>
</ng-template>
<ng-template #nextButton>
   <my-button>Go ahead!</my-button>
</ng-template>
<ng-template #doneButton>
   <my-button>Complete</my-button>
</ng-template>
<ng-template #counter let-step="step" let-total="total">
   {{ step }} of {{ total }} steps
</ng-template>

N.B.:

• These inputs should be used just once, in the first step of your tour.
• The counter template has 2 parameters, step represents the current step number, total is the total number of steps.

[DeepakMahana]

It's a great one to use. Kudos to the developers. I having a use case where I need to auto-scroll the tour. How can I achieve this? I am using Perfect-Scrollbar with this library.

Thanks in Advance !!

[tnicola]

Thank you @DeepakMahana !!
Auto-scroll feature (both horizontal and vertical) should work by default, no needs to enable it. Isn't it working in your case? Can you describe better your scenario please? Thanks.

[tnicola]

@DeepakMahana There was an error with the auto-scroll feature ( issue 22) Can you please check it with the new version?