How to highlight the first or second or third slide?

Feature Requests / Improvements
1

Sometimes I want to add custom class first or second or third slide
so I can change styles a bit.

any idea how ?

there are some examples here but I am not sure how to implement for bricks sliders
it has focus property how can I select current slide and apply that focus or add custom class to it?

do I need to de-register and re-init slider ? I think that would be bad for performance not sure…
I need a simple way to hook in to current slide properties.

image

2

Hi there, are you using query loop to fetch slides? If so maybe you may set some kind of highlight metafield with value. Then you may use it as class for your loop item and just apply CSS styling to that specific class.

3

css wont work js creates shadow doms to loop it :slight_smile:

you might have 3 slides but that changes after the slider initializes it becomes like 9 12…etc slide

so simple nth- …selectors useless.

4

the current slide always has the class ‘is-active’. Use that to add styling only to the currently active slide.

5

Use data attribute for your looped Item. It gets copied by JS with it. So you may apply CSS without a problem.

Try → Create loop from slide item → apply data-attr to slide use let say {post_id} → write custom CSS like so [data-attr="postID"] { /* your desired CSS */} should work without problem I’ve tried.