3

I am new here and I am looking for the answer to something that is bugging me so much. I am working on a website for a client and it uses fullpage.js..... you can see the website at http://begemini.co.uk/workshop/loweclothing/index.html

The problem is I am having issues with the text next to the arrows. I can't get the right text to stay on "slide1" I have tried using "position:fixed" but it stays in the right place but it is on every slide and I need different text on each slide....

The html code is:

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

And the css is:

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

So basically I am trying to place the text to the arrows but to transition with the rest of the content. And I want different text next to the arrows on each page. You can download the whole site here to have a look at the whole code.

Any help would be appreciated.. Thanks, Rob

4

3 回答 3

0

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

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

于 2014-01-14T22:09:38.203 回答
0

逻辑似乎是错误的。

尝试位置：相对而不是固定或绝对，并将顶部、左侧和右侧设置为自动或 x%。

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

于 2014-01-15T02:06:57.143 回答
0

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

这样，您将能够使用 jQuery 决定要为每张幻灯片添加哪些文本，例如：

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

为了正确定位文本，您可以使用 absoluted 来定位，因为这些部分具有position:relative.

于 2014-01-15T16:18:08.027 回答