Slider as gallery with thumbnails navigation elements

[Regnalf]

Hi there,

For a custom post type I need a small gallery that should be filled dynamically. So I thought why not try this with your ingenious slider element. And by rewinding the provider and the data-x-slide-goto attribute this can be realized wonderfully.

The navigation with the thumbnails works perfect, the only real downer is that the current thumbnail element can’t be styled as easily because it doesn’t have an “active” CSS class or attribute like the official pagination.

I know that you can layout the element with the high enough placed data-x-slide-context attribute and the corresponding CSS variable --x-slide-current. But this only works with a fixed number that has to be defined and it only works if you not placing this css to the custom css of the element. (Because of the removed spaces.)

#slider[style*="--x-slide-current: 1"] .tn-slide-1,
#slider[style*="--x-slide-current: 2"] .tn-slide-2,
#slider[style*="--x-slide-current: 3"] .tn-slide-3,
#slider[style*="--x-slide-current: 4"] .tn-slide-4
{
  border: 2px solid red !important;
}

Can you add this “active” status, or whatever to the current data-x-slide-goto element, as with the standard pagination? I mean, that would be the purpose for offering the option of your own navigation.

Thanks in advance

[ruenel]

Hello @Regnalf,

Thanks for writing in! Did you just create a custom thumbnail for your slider? You may need to set the Interaction Border color because it may be used as the Active status as well.

Best Regards.

[Regnalf]

Hi @ruenel, the Interaction only works with mouse hover, but it didn’t set an ‘active’ state.

Mouse hover:

I put the thumbnail images in a second looper consumer, with the ‘rewind’ option set in the first of the slides.

But there is no ‘active’ state or whatsoever in the dom. Only the goto attribute:

An is-active CSS class is set in your slider pagination functionality.

I tried to use the data-x-slide-pagination attribute, but this overwrites all content of this element with the default pagination.

It would be great if there could be something like a data-x-slide-pagination-goto, then the slider would also be perfect for such uses and we wouldn’t need a separate plugin for a small gallery.

[marc_a]

Hey @Regnalf,

This video may help you with your native slider and design implementation.

• Cornerstone Gallery with Native elements

Hope that helps.

[Regnalf]

Excellent, I must have somehow overlooked the fact that you can apparently mix sliders. I thought the thing would explode if I nested it.

Many thanks @marc_a, but this is excactly what i’m looking for.

[ruenel]

You are most welcome, @Regnalf.

[Regnalf]

Just one more small question: The inline slider has a start animation after the page load, where it slides into the frame from right to left. Can this animation be removed?

[ruenel]

Hey Regnalf,

I am afraid that we cannot remove that animation. That was built-in animation. We will ask Charlie when he gets back from his vacation.

Thanks.