Timeline slider tweak

[oriol]

Hi there, see here: https://staging.earthlingsecurity.com/fedramp-as-a-service-3/

Im using the timeline slider form your sliders pack.

I was wondering, as each slide gets “done” and a tick appears, how do I make it so the last 2 slides both have ticks when done…so in stead of this:

This:

Thanks.

[ruenel]

Hello @Oriol,

Thanks for writing in!

In your Slider Container element, select “Content” for the “Scroll By” option.

This should mark the slides that are visible on screen.

Kindly let us know how it goes.

[oriol]

Thanks, however, that now makes all of them ticked, I want them to tick as you click next through the slider, then the last 2 stay ticked…

[ruenel]

Hello @Oriol,

If that is the case, revert to the previous setting and then edit your Looper Provider JSON. You may need to change the last two item’s “status” into “done”.

Hope this helps.

[oriol]

I did as you said, but its still not doing what I require:

[ruenel]

Hey @Oriol,

We would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[oriol]

Sure, see secure note.

[ruenel]

Hello @Oriol,

Since the Icons will only get displayed with the Effects module when the slide is scrolled, a custom CSS is needed. There is a need to identify when the 4th slide is active so the 3rd slide’s Icon gets enabled. For example:

.x-slide:nth-child(3):has(~ .x-slide:nth-child(4).is-current-slide) > .x-div .x-effect-exit{
    opacity: 1;
    transform: translate(0px, 0px);
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[oriol]

Awesome, thanks, so I just add the above code to the sites css and it will work?

[ruenel]

Hey @Oriol,

The code above is an example and will work only on a 4 slide item Slider.

Thanks.

[oriol]

Gotchya, it worked, so thanks!

[ruenel]

You are most welcome.