CSS: change arrows on fullpage JS?

▼魔方 西西 提交于 2019-12-05 13:32:11

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

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

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:

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

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!