CSS/HTML：如何在整页 JS 上有自定义箭头？

Question

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

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

不行，谁能解释一下原因？

或者，有没有办法添加自定义箭头 html 标记？

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 标记

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

并使用 Raptor 对这个关于 CSS 更改的问题的回复，我发现默认情况下，可以通过在 fullpage() 初始化的脚本中添加两行来将新的自定义元素附加到元素。请不要这样，因为似乎 fullpage 不会在其原始元素上委托点击事件，一旦添加了新元素，您将不得不重新分配。

脚本的变化

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

    // to gain events control / click event delegation
    $('.fp-prev').on('click', function(){ fullpage_api.moveSlideLeft(); });
    $('.fp-next').on('click', function(){ fullpage_api.moveSlideRight(); });
});

结果是：

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

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