Treehouse: Grow your CSS skills. Land your dream job.

multiple Anything Slider styling on one page

  • # June 29, 2012 at 6:15 pm

    Hello everyone. I’m trying to get multiple sliders running on one page, but I’m having problems styling each slider differently from the other.

    The sliders have id’s slider1, slider2, and slider3 respectively. So when I try to style a section of slider2 differently, like:
    #slider2 .anythingSlider-default.activeSlider .anythingWindow {}

    it doesn’t work. Any ideas how to style multiple sliders on one page?

    # June 29, 2012 at 8:06 pm

    Hi optimus203!

    Current versions of AnythingSlider have a theme option which allows you to change the style for each slider on a page. Then for the css, just add that theme name to the outer wrapper:

    .anythingSlider-theme1 {}
    .anythingSlider-theme1.activeSlider {}
    .anythingSlider-theme1.activeSlider .anythingWindow {}
    .anythingSlider-theme2 {}
    .anythingSlider-theme2.activeSlider {}


    You can’t target the #slider2 ID because it is inside of .anythingWindow

    # July 6, 2012 at 3:07 pm

    Perfect! Working like a charm now. Thanks for the help and insight.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.