CSS/HTML: how to have custom arrows on fullpage JS?

Question

I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. However when trying to change the arrow style:

.controlArrow.prev {
    left: 50px;
    background: url(left.png);
    background-repeat: no-repeat;
}
    
.controlArrow.next {
    right: 50px;
}

It doesn't work, can anyone explain why?

Or, is there a way to add custom arrows html markup?

Answer 1

Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow:

.fp-controlArrow.fp-prev {
    left: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(left.png) no-repeat;
    cursor: pointer;
}
.fp-controlArrow.fp-next {
    right: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(right.png) no-repeat;
    cursor: pointer;
}