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

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.

.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

<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

$(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

<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

I was just wanting to change the color of the arrow - so if that is all you want to do, you can just change it to black (or whatever color) with this css:

.fp-controlArrow.fp-next { border-color: transparent transparent transparent black }
.fp-controlArrow.fp-prev { border-color: transparent black transparent transparent }

Hope this is helpful to someone!

Answer 5

You could add custom arrows by using the icons from fontawesome and add this in the fullPage.js:-

new fullpage("#fullpage", {
/* fill up the required options*/
afterRender: function () {
        /** arrow-left */
        const arrow_left = document.querySelector(".fp-controlArrow.fp-prev");
        arrow_left.innerHTML = `<i class="fas fa-chevron-left"></i>`;
        /** arrow-right */
        const arrow_right = document.querySelector(".fp-controlArrow.fp-next");
        arrow_right.innerHTML = `<i class="fas fa-chevron-right"></i>`;
    }
}

and add this to your style.css (to remove the default arrow and position the arrow in the center of the div)

/* left-slider-arrow */
  .fp-controlArrow.fp-prev {
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* right-slider-arrow */
  .fp-controlArrow.fp-next {
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

Answer 6

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

<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(); });