{{dc:rvt:outlet state="slider" key="current"}}

[bobbybosler]

Are there any dynamic fields that will return a raw number for the current slide? The {{dc:rvt:outlet state="slider" key="current"}} dynamic field returns a number wrapped in a span. I’d like to use a raw number to do some unique styling per slide on my nav elements. Is that a thing?

[tristup]

Hi @bobbybosler

Thanks for reaching out.
Unfortunately, there is no option to get the current index value without the span. I would suggest you add the Dynamic Content into a DIV element and add a class to it. Add the style based on the parent class added to the parent DIV element.

Hope it helps.
Thanks

[bobbybosler]

I’m sorry, I still don’t see how that helps me style anything based on the current slide because I still can’t get the index number into my class either. Am I missing something in your suggestion?

[tristup]

Hi @bobbybosler,

I am not sure about the structure you are having, still, I want to explain the way I did it in my local environment. I added a DIV element inside the Slider element and added the class name test into that. And based on that parent class write the following custom CSS code into the Element CSS of the DIV to style.

$el.test .x-text span
{
    color:#ff0000;
    font-size:12px;
    font-weight:900;
    background-color:#cccccc;
    padding:8px;
    border-radius:50%;
}

Hope it helps.
Thanks

[bobbybosler]

Okay, I’m not sure I’ve clearly stated what I want to do. I want to style my slide nav elements differently based on which slide is current. I was hoping to use {{dc:rvt:outlet state="slider" key="current"}} to set a variable class that would allow me to change the color of my nav elements based on the current slide. Could you all whip together a simple dynamic content field that returns a raw number for the current slide so I can do this in the next release?

[alexander]

Hi @bobbybosler,

I’m sorry, there isn’t a way to do quite what you’re looking for right now with Dynamic Content because it runs in PHP and outputs once when the page loads. It doesn’t respond to changes happening on the front end. The {{dc:rvt:outlet ...}} is somewhat of a special bridge for the Slider elements. The span tag is created statically, then the Slider JavaScript finds it and uses it as a container to hold the slide number. There isn’t a way to just arbitrarily use the current slide number in real time on the front end.

We do have some functionality planned that will let you create custom classes, attributes, and CSS custom properties that dynamically update in realtime. The data management at the heart of the slider element was designed to be used in many other contexts down the road. For example, you’ll be able to take any set of elements and make them into custom tabbable areas. You’ll also be able to observe which tab is active and use that state in your designs. These features are a bit down the road, so unfortunately for now the only thing I can offer is somewhat of a CSS hack.

If you add a data-x-slide-contextattribute to any parent element above the slide container, you can determine where the slider’s --x-slide-current CSS custom property is located. This can be useful in calc statements to create styles that are relative to the current slide. Pushing the boundaries of CSS, it could also be used in a selector. For example:

[style*="current:2"] .my-custom-element {

}

This CSS should apply when the slider is on the second slide.

[bobbybosler]

@alexander,

Brilliant! I didn’t even think about using attribute selectors!

That being said, though, I’m not sure the data-x-slide-context attribute is working in my case. All that it is producing on the front end is the attribute itself. Am I correct in thinking that the attribute is supposed to be replaced with a style="custom properties" attribute via JS?

Here is the basic structure of my slider. The data-x-slide-context is on the “Navigation” div.

[bobbybosler]

@alexander,

Never mind. I put the attribute on the .fullscreen-slider element pictured above and it worked as expected. Apparently, the attribute needs to be on a direct descendant of the slide container and not a sibling or a cousin.

I’m having fun with :is() statements now in my CSS and it’s working!! Thanks!!

EDIT
Actually, it appears that my CSS is working in cornerstone, but it’s only working on the front end on Chrome, Opera, Brave, and Edge, but not on Safari and Firefox. I have no idea why.

Here’s my CSS:

:is([style*="current: 13"], 
[style*="current: 14"], 
[style*="current: 15"], 
[style*="current: 16"], 
[style*="current: 17"], 
[style*="current: 18"], 
[style*="current: 19"], 
[style*="current: 20"], 
[style*="current: 30"], 
[style*="current: 31"], 
[style*="current: 32"], 
[style*="current: 33"], 
[style*="current: 34"]) :is(.next-arrow, .prev-arrow:hover) {
  color: rgba(69,69,69,0.2);
}

:is([style*="current: 13"], 
[style*="current: 14"], 
[style*="current: 15"], 
[style*="current: 16"], 
[style*="current: 17"], 
[style*="current: 18"], 
[style*="current: 19"], 
[style*="current: 20"], 
[style*="current: 30"], 
[style*="current: 31"], 
[style*="current: 32"], 
[style*="current: 33"], 
[style*="current: 34"]) .next-arrow:hover {
  color: rgba(69,69,69,0.5);
}

[alexander]

Hi @bobbybosler,

Looking good! On the browser compatibility issue, the first thing that comes to mind is having a space in the CSS. Maybe try without it like this: current:32. Either that, or this CSS hack might just not be stable enough to rely on.