CSS/HTML: 如何在fullpage 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标记？

- designnewb

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

- Raptor

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

- Alvaro

Answer 3

我想使用Font Awesome作为箭头图标，一开始不知道该怎么做。但是后来我查看了fuulpage.js初始化后所做的更改：

原始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>

- Yuliya Ulanova

Answer 4

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

- Luca Reghellin

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

- kob003

Answer 6

我只是想要改变箭头的颜色 - 所以如果你只是想做这个，你可以用以下 CSS 将它改为黑色（或任何颜色）：

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

希望这对某人有所帮助！

- Eskim0