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:

Click to copy

.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:

Click to copy

.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;
}

Answer 2

First of all, download the lastest version of the plugin (and its CSS file). Fullpage.js no longer uses controlArrow but fp-controlArrow.

Make sure you add your own styles after including jquery.fullpage.css so you can over write the plugin ones. Also, make sure to over write all the styles applied by default.

Take into account that the current arrows are formed by the border attribute. not by any background. You need to replace those styles and even change the width and height.

If you take a look at jquery.fullpage.css you will see the styles you need to over write.

Click to copy

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}

Answer 3

I wanted to use font-awesome for arrow icons and didn't know what to do at first. But then I looked into the changes that were made in the html-markup after initialization of fuulpage.js:

original html-markup

Click to copy

<div class="fp-controlArrow fp-prev"></div>
<div class="fp-controlArrow fp-prev"></div>

and using the Raptor's reply to this question about changes in a CSS I've found that it is possible to append a new custom element to an element by default by adding two lines in the script where fullpage() was initialized. Please not that since it seems fullpage doesn't delegate click events on its original elements, once added the new ones you'll have to re-assign.

changes in the script

Click to copy

$(document).ready(function () {
    $('#fullpage').fullpage();
  
    // The changes that were made
    $('.fp-prev').append('<span class="fa fa-angle-left"></span>');
    $('.fp-next').append('<span class="fa fa-angle-right"></span>');

    // to gain events control / click event delegation
    $('.fp-prev').on('click', function(){ fullpage_api.moveSlideLeft(); });
    $('.fp-next').on('click', function(){ fullpage_api.moveSlideRight(); });
});

The result is:

final html-markup

Click to copy

<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-left"></span>
</div>
<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-right"></span>
</div>

Answer 4

You can also simply disable default arrows, add yours, and add js events (along with your own css):

Click to copy

<div class="section">
  <button class="fp-custom-arrow left">[your arrow code/image]</button>
  <button class="fp-custom-arrow right">[your arrow code/image]</button>

  <div class="slide" data-anchor="slide1"> Slide 1 </div>
  <div class="slide" data-anchor="slide2"> Slide 2 </div>
  <div class="slide" data-anchor="slide3"> Slide 3 </div>
  <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

// ideally on domready or in footer
new fullpage('#fullpage', {
  controlArrows: false, // arrows disabled
});

$('.fp-custom-arrow.prev').on('click', function(){ fullpage_api.moveSlideLeft(); });
$('.fp-custom-arrow.next').on('click', function(){ fullpage_api.moveSlideRight(); });