CSS/HTML:如何在全页面JS上拥有自定义箭头

CSS/HTML: how to have custom arrows on fullpage JS?

本文关键字：JS 拥有 自定义 HTML CSS      更新时间：2023-09-26

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

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

它不起作用，有人能解释为什么吗？

或者，有没有一种方法可以添加自定义箭头html标记？

扩展@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;
}

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

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

考虑到当前箭头是由border属性形成的。而不是通过任何CCD_ 5。您需要替换这些样式，甚至更改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;
}

我想在箭头图标上使用很棒的字体，但一开始不知道该怎么办。但后来我研究了fuulpage.js:初始化后html标记中所做的更改

原始html标记

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

使用Raptor对这个关于CSS更改的问题的回答，我发现通过在初始化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>

您也可以简单地禁用默认箭头，添加您的箭头，并添加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将其更改为黑色（或任何颜色）：

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

希望这对某人有帮助！

您可以使用fontwo敬畏中的图标添加自定义箭头并将其添加到完整的Page.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;
  }
相关文章：