[Resolved] Possible to style first element of a view?

[Author]

Posts

[manuelE]

Hi there,

Is it possible to address the first element of the "view-result" somehow different? Best would be a conditional output like "if first element" ...

I would need this because I´m creating a bootstrap slider in which the first element (=div) needs to have the class "active".

Thanks in advance!

Cheers,
Manuel

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Manuel,

Thank you for contacting Toolset support. Our forum is loaded with more tickets than usual. I am working on your ticket right now, trying to reproduce this issue and I believe this should be doable for Slider View. I will update you shortly with the result.

Thank you for waiting.

[manuelE]

Hi Noman,

thanks for your answer ... and no worries, chances are that I found a solution, not sure yet but I will know within the next 2-3 hours or so ... will update you tonight if I need your help, otherwise I will mark this ticket as solved.

Bye for now,
Manuel

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have tested this case, you can achieve it using [wpv-item] shortcode in the Loop Output editor. See attached screenshot for an example on how to add “active” class on first slide only, you can do same for other slides (items) as well -- index=2, 3, 4, etc.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

More info in this doc for understanding how Views Loop Output works:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/
-- Specially take a look in section “Loop parameters & wpv-item : wrap, pad, pad-last, index”

I hope it helps, Thank you

[manuelE]

Hi Noman,

thanks so much for looking into this!

Since I am using further conditional output in the view itself the approach with [wpv-item] was not working though (because this way the first element is not neccessarily index=1).

But: I completely started from scratch with the Views built in Slider and rebuild it for that. And it works just fine now! 🙂

Thanks again!
Manuel