Title: css on active slides
Last modified: June 17, 2019

---

# css on active slides

 *  [roguetrooperb](https://wordpress.org/support/users/roguetrooperb/)
 * (@roguetrooperb)
 * [6 years, 12 months ago](https://wordpress.org/support/topic/css-on-active-slides/)
 * So I am looking for a solution here. My issue is I am using the looped slider,
   showing 3 items at a time. I am trying to make it where the first and third active
   slide have a slight overlaid opacity over it. My issue is that when I use the
   css selector :nth-child(odd):after, it works for the first set of three slides
   that are visible. Once it slides though, it does not switch the css for the outer
   slides, because it acts as if the previous item that had an active class still
   is an active class. This creates an unwanted effect where it just alternates 
   between having opacity and not.
    I guess my question is are there any hooks or
   events that I can use which will tell me when the class has changed to/from active
   or the slides have been slidden (manually/automatically)?

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [roguetrooperb](https://wordpress.org/support/users/roguetrooperb/)
 * (@roguetrooperb)
 * [6 years, 12 months ago](https://wordpress.org/support/topic/css-on-active-slides/#post-11646471)
 * I have found a method for a manually sliding (click prev/next) slider by adding
   a separate class on initial load to the 2 outer active slides, and then every
   click of the button remove and then re-add the extra classes to the new outer
   active slides.
    This is a good start, but I would also like to know how to hook
   into the event of when the slider changes automatically. Any help would be appreciated.
 *  Plugin Author [simonpedge](https://wordpress.org/support/users/simonpedge/)
 * (@simonpedge)
 * [6 years, 12 months ago](https://wordpress.org/support/topic/css-on-active-slides/#post-11648298)
 * Hmmm, well I would try target the following CSS myself to achieve this:
 *     ```
       #SLIDER_ID .owl-stage .active:nth-child(1),
       #SLIDER_ID .owl-stage .active:nth-child(3) {
       ...
       }
       ```
   
 * Is this what you tried?
 * Beyond that I don’t know… The DIV wrappers with the defined classes are generated
   by the Owl Carousel plugin, which my plugin is built on.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘css on active slides’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/slide-anything.svg)
 * [Slide Anything - Responsive Content / HTML Slider and Carousel](https://wordpress.org/plugins/slide-anything/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/slide-anything/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/slide-anything/)
 * [Active Topics](https://wordpress.org/support/plugin/slide-anything/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/slide-anything/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/slide-anything/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [events](https://wordpress.org/support/topic-tag/events/)

 * 2 replies
 * 2 participants
 * Last reply from: [simonpedge](https://wordpress.org/support/users/simonpedge/)
 * Last activity: [6 years, 12 months ago](https://wordpress.org/support/topic/css-on-active-slides/#post-11648298)
 * Status: not resolved