css on active slides

  • roguetrooperb

    (@roguetrooperb)


    6 years, 12 months ago

    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

    (@roguetrooperb)

    6 years, 12 months ago

    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

    (@simonpedge)

    6 years, 12 months ago

    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.

Tags