How do I style the arrows?

The arrows he used in the video look a lot like the arrows from the Font Awesome Iconic Font and CSS Toolkit. Example Right Arrow here

Also, here's a link to right arrows that can be easily used in HTML here. There's left-arrow.net for left arrows. ... For alternatives without importing an icon font or images.

I also had trouble getting the arrows to show, but in a different, customized project, even with 'arrows' set to 'true' in the script. I came up with this quick CSS fix using the content attribute:

.slick-next::after {
  content: ">";
  color: #424242;
  font-size: 20px;
}
.slick-prev::after {
  content: "<";
  color: #424242;
  font-size: 20px;
}

Initially font-size is set to 0 and color is set to transparent in the theme file, so the attributes of color and font-size should be changed to whatever works for you.

In the Slick-Theme.css file, the arrows are marked like this character: →, which can also be represented as → → and &#x2192. Somehow I think the browser translates this to the circular filled chevron option we saw in the challenge. It may just be something Chrome does, or there's some code in the plugin files I don't understand.

If you still can't find a fix, and you have your heart set on the exact look + feel, you can import the FA library into your project, and assign the content of .slick-prev::after and .slick-next::after to the Font Awesome arrow equivalent.

First, import the Font Awesome files, or use the CDN: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Then add the following CSS to your main.css stylesheet:

.slick-prev::after {
    content: "\f137";
    font-family: FontAwesome;
    /* adjust as necessary */
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
}

.slick-next::after {
    content: "\f138";
    font-family: FontAwesome;
    /* adjust as necessary */
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
}

Hope this helps.

<p>Add the theme.css file in the html. In your main.css file add the following lines</p>

.slick-prev {
  left: 20px;
}
.slick-next {
  right: 20px;
}

<p>This should show your arrows in the preview</p>

Not sure of what video you are on but some things to look out for:

Make sure you are selecting the exact element. I would open you file into chrome and right click on the arrows you are trying to mimic and click inspect element. Here you can see the exact styling being added to each element. This is a great way to see what styles are being used in the video too. Each video usually has files that can be downloaded of the final project.

If you have multiple style sheets or CSS in general, the last piece of code (or CSS file) will be what is used and will overwrite any css previously styling an element.