Question

我是新来的，我正在寻找那些让我烦恼的事情的答案。我正在为一个客户的网站工作，它使用fullpage.js .....你可以在http://begemini.co.uk/workshop/loweclothing/index.html

看到该网站

问题是我在箭头旁边的文字有问题。我无法获得正确的文字以保持＆＃34; slide1＆＃34;我尝试过使用＆＃34; position：fixed＆＃34;但它保持在正确的位置，但它在每张幻灯片上，每张幻灯片上都需要不同的文字......

html代码是：

    <body>
<div class="section" id="section1">
    <div class="slide" id="slide1"><img src="imgs/Lowe-Clothing-logo.png" width="30%">
            <div id="left-text">Business Opportunities</div><!--left-text-->
  <div id="right-text">Introduction</div><!--right-text--></div><!--Slide1-->
    <div class="slide" id="slide2"><h1>Totally customizable</h1></div><!--Slide2-->
</div>


</body>

而css是：

#left-text{
    position: absolute;
    top: 50%;
    left: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
 }

 #right-text{
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
    z-index:100;
 }

所以基本上我试图将文本放在箭头上，但要与其他内容一起转换。我希望每页上的箭头旁边都有不同的文字。您可以下载整个网站here以查看整个代码。

任何帮助将不胜感激.. 谢谢，罗布

Answer 1

首先尝试仅使用一种css单元，即仅使用像素或仅使用em。

尝试这个并随后使用相对或绝对，并尝试它是否有效。

Answer 2

逻辑似乎是错误的。

尝试位置：相对而不是固定或绝对并将top，left和right设置为auto或x％。

键应该与位置，顶部，左侧和右侧一起使用。

Answer 3

为了更改每张幻灯片的文本，您应该做的是使用插件提供的回调。在这种情况下，您需要使用回调afterSlideLoad

通过这种方式，您可以使用jQuery来决定要为每张幻灯片添加哪些文本：

$('textLeft').text('demo');
$('textRight').text('demo');

为了正确定位文本，您可以使用绝对定位来执行此操作，因为这些部分具有position:relative。

如何让我的箭头文本保持在fullpage.js上的正确位置？

3 个答案: