Question

我使用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-markup

<div class="fp-controlArrow fp-prev"></div>
<div class="fp-controlArrow fp-prev"></div>

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

脚本中的更改

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

结果是：

最终的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

我只是想更改箭头的颜色-因此，如果您要这样做，则可以使用此CSS将其更改为黑色（或其他颜色）：

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

希望这对某人有帮助！

Answer 5

您可以使用 fontawesome 中的图标添加自定义箭头并将其添加到 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>`;
    }
}

并将其添加到您的 style.css（删除默认箭头并将箭头放置在 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

您也可以简单地禁用默认箭头，添加您的，并添加 js 事件（以及您自己的 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(); });

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

6 个答案:

原始html-markup

脚本中的更改

最终的html-markup