javascript CSS：更改整页 JS 上的箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25785914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: change arrows on fullpage JS?
提问by designnewb
I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/to make my website. However when trying to change the arrow style:
我正在使用 fullpageJS https://github.com/alvarotrigo/fullPage.js/来制作我的网站。但是，当尝试更改箭头样式时：
.controlArrow.prev {
left: 50px;
background: url(left.png);
background-repeat: no-repeat;
}
.controlArrow.next {
right: 50px;
}
It doesn't work, can anyone explain why?
它不起作用，谁能解释为什么？
回答by Raptor
Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow:
扩展@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;
}
回答by Alvaro
First of all, download the lastest version of the plugin (and its CSS file). Fullpage.js no longer uses controlArrowbut fp-controlArrow.
首先，下载插件的最新版本（及其 CSS 文件）。Fullpage.js 不再使用controlArrow但fp-controlArrow.
Make sure you add your own styles after including jquery.fullpage.cssso you can over write the plugin ones.
Also, make sure to over write all the styles applied by default.
确保在包含之后添加自己的样式，jquery.fullpage.css以便您可以覆盖插件样式。此外，请确保覆盖默认应用的所有样式。
Take into account that the current arrows are formed by the borderattribute. not by any background.
You need to replace those styles and even change the widthand height.
考虑到当前箭头是由border属性形成的。不是任何background. 您需要替换这些样式，甚至更改width和height。
If you take a look at jquery.fullpage.cssyou will see the styles you need to over write.
如果你看一看，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;
}
回答by Yuliya Ulanova
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:
我想对箭头图标使用 font-awesome，但一开始不知道该怎么做。但是后来我查看了 fuulpage.js 初始化后在 html-markup 中所做的更改：
original html-markup
原始 html 标记
<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:
并使用 Raptor 对这个关于 CSS 更改的问题的回复，我发现可以通过在初始化 fullpage() 的脚本中添加两行默认情况下将新的自定义元素附加到元素：
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
最终的 html 标记
<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>
回答by Eskim0
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:
我只是想改变箭头的颜色 - 所以如果这就是你想要做的，你可以用这个 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!
希望这对某人有帮助！
