Data-x-slide-context style attribute output

[adaptifyDesigns]

This is in reference to a previous ticket I opened, which was closed before I had a chance to respond. Here is the original ticket: Data-x-slide-content Bug?

What is the purpose of having the --x-slide-current:1 and --x-slide-total:3 added to the slide container’s style attribute?

When these values are added to the style attribute, it makes it very difficult to use them for anything. I can’t target them with css, and it would be very cumbersome to target them with JS. So what’s the reason they are inserted into the element’s style attribute, as opposed to being added as data attributes with values? Then I could actually use them to target the slider container depending on what slide number was currently active.

What was the thought process here? Thanks.

[ruenel]

Hello @adaptifyDesigns,

Thanks for writing in!

The data-x-slide-context can be used to more clearly define the “context” of a Slider and which Elements should relate to one another. By default each Slide Container creates its own context and any navigation / pagination Elements placed near it should “just work” out of the box. However, if you are placing multiple sliders with multiple navigation Elements all within one Section, that is a situation where you might want to go up to the unique parent of each Slider and place this attribute on it to avoid any cross-talk between the Sliders.

The --x-slide-current:1 and --x-slide-total:3 were added to the slide container’s style attribute so that it can be used as an attribute value to be used internally and also to know of the total number of slide and the current slide on that slider container.

If you are going to target all the slides, you can use .x-slide class selector in your CSS. To target the current slider, you use .x-slide.is-current-slide as your class selector. If you want to target specific slider container, it is best that you add custom CSS class selector in your slider container for you to easily remember or add the selector to your custom CSS.

Be advised that custom coding is beyond the scope of our support. You may need to contact a 3rd party developer if you are not familiar with coding or that you will have to maintain any of the custom CSS added to your site to make sure that it still up to date and work with the latest versions of the theme.

Best Regards.