CSS/HTML:如何在整页JS上使用自定义箭头?

问题描述

我正在使用fullpageJS https://github.com/alvarotrigo/fullPage.js/使我的网站.但是，当尝试更改箭头样式时:

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?

或者，是否可以添加自定义箭头html标记?

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

推荐答案

扩展@Alvaro的答案，只需用图像替换默认的边框箭头，如下所示:

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

这篇关于CSS/HTML:如何在整页JS上使用自定义箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！