javascript - Change the color of arrows using Slick on Github pages - Stack Overflow

admin管理员组

文章数量:1424963

I'm using Slick to add a carousel on my Github pages, but I have trouble setting the color of arrows. By default the arrows are white and since my background is white, I try to make the arrows visible and yellow by

    .slick-prev:before,
    .slick-next:before {
        color: yellow;
    }

I'm using Slick to add a carousel on my Github pages, but I have trouble setting the color of arrows. By default the arrows are white and since my background is white, I try to make the arrows visible and yellow by

    .slick-prev:before,
    .slick-next:before {
        color: yellow;
    }

I only get a yellow arrow, but what I expected is a yellow circle with a white arrow in it.

Current visual with yellow arrow

Expected visual with yellow circle

I don't know where went wrong. Really appreciate your help.

• javascript
• html
• css

Share Improve this question Follow edited May 23, 2024 at 4:52 Karan 12.6k33 gold badges2929 silver badges4444 bronze badges asked Jun 2, 2017 at 14:37 yinkouyayinkouya 9311 silver badge1111 bronze badges 4

• try to force the use with .slick-prev::before, .slick-next::before { color: red !important; } – PiLHA Commented Jun 2, 2017 at 14:42
• you want your color to be white and your background-color to be yellow (I think) – Pete Commented Jun 2, 2017 at 14:56
• It looks like it's an issue with the 'slick' font family not loading or being broken at some point. What you're seeing is a fallback for when the 'slick' font family can't be loaded. See here: jsfiddle/51h1y90p. In the top slider, I've broken the font family rule and the odd arrows appear, but in the bottom one it works fine with the same rule for the yellow color. Are you getting any 404 errors in your javascript or network consoles? – Joseph Marikle Commented Jun 2, 2017 at 14:58
• @JosephMarikle you are right about the 404 errors! I added woff and tff files to assets/fonts, and it worked out fine. Thank you a lot!. – yinkouya Commented Jun 2, 2017 at 15:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Edit: I just saw the fiddle above. If you set the font-family to initial!important and add color:yellow; then your yellow background will work:

.slick-prev:before,
.slick-next:before {
    font-family:initial!important;
    color:yellow; 
}

(or you could pick a yellow variant)

my fiddle

Hope this helps

You can Add this css to get the same view that shown in the example doc of react slick

  .slick-next {
    right: 10px;
    background: rgb(243, 243, 243) !important;
    border-radius: 7px;
  }
  
  .slick-prev {
    left: 10px;
    z-index: 2;
    background: rgb(243, 243, 243) !important;
    border-radius: 7px;
  }
  

  .slick-prev:before,
  .slick-next:before {
    color: rgb(0, 0, 0);
  }

{` .slick-prev:before, .slick-next:before { color: red; } `}

本文标签： javascriptChange the color of arrows using Slick on Github pagesStack Overflow