CODEWITHSUNDEEP
jqueryhtmlcssunslider
Tanasos
Tanasos

Reputation: 4098

How to override Unslider's arrows styling?

I am using multiple instances of Unslider on a website I am working on, and one of them needs to have navigation arrows. I added the arrows but now I can't style them, they seem to be inaccessible trough CSS. No !important; rules work either.

Here is my html:

<div class="unslider">
    <div class="slider">
       <ul>
          <li>
             <!-- slide content -->
          </li>
          <li>
             <!-- slide content -->
          </li>
       </ul>
    </div>
</div>

Here is my SCSS (based upon generated markup from the plugin itself):

.unslider {
    .slider {
        // slide styling
    }
    .unslider-arrow {
        background: tomato !important;
    }
}

And my initialization:

$('.slider').unslider({
   autoplay: true, delay: 7000,
   arrows: true,
   nav: false,
})

Here is a Fiddle.

NOTE: All of the samples are just blank code, which size has been reduced in order to help better and quicker understanding.

No matter what I do, my SCSS(CSS) can't reach the arrows.

SOLUTION: As Marcos described in his answer, You should be very careful about your CSS hierarchy. If you are adding custom containers, unslider might mix-up your selectors slightly.

Upvotes: 1

Views: 223

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

The arrows are not children elements of the .slider. container.

To achieve what you want, the SCSS hierarchy should look like this:

.unslider {
        .unslider-arrow {
            background: tomato ;
        }
}

Your original code seems to be adding a .slider parent that you don't need.

Working fiddle: https://jsfiddle.net/cq5p2g1e/2/

Upvotes: 2

Related Questions