CSS：在整页JS上更改箭头？

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

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

它不起作用，任何人都可以解释为什么？

Answer 1

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

 .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

首先，下载最新版本的插件（及其CSS文件）。 Fullpage.js不再使用controlArrow而是使用fp-controlArrow 。

确保在包含jquery.fullpage.css之后添加自己的样式，以便可以重写插件。 此外，请确保重写所有默认应用的样式。

考虑到当前箭头由border属性形成。 不是任何background 。 您需要更换这些样式，甚至更改width和height 。

如果你看一下jquery.fullpage.css你会看到你需要写的样式。

 .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

我想在箭头图标上使用font-awesome，并且最初不知道该怎么做。 但后来我查看了fuulpage.js初始化后html-markup中所做的更改：

原始的html标记

并使用Raptor对这个问题的回复关于CSS的变化我发现默认情况下可以通过在脚本中添加两行来初始化fullpage（）来向元素追加一个新的自定义元素：

脚本中的更改

 $(document).ready(function () { $('#fullpage').fullpage(); // The changes that were made $('.fp-prev').append(''); $('.fp-next').append(''); }); 

结果是：

最终的HTML标记