如何讓我的箭頭文字留在fullpage.js的正確位置？

我在這裏是新來的，我正在尋找答案，這是非常困擾我的東西。我正在爲一個客戶端的網站工作，它使用fullpage.js .....你可以看到網站http://begemini.co.uk/workshop/loweclothing/index.html 如何讓我的箭頭文字留在fullpage.js的正確位置？

問題是我有箭頭旁邊的文本問題。我無法獲得正確的文字留在「slide1」我曾嘗試使用「位置：固定」，但它保持在正確的位置，但它是在每張幻燈片上，我需要在每張幻燈片上使用不同的文字......

的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看看整個代碼。

任何幫助，將不勝感激.. 謝謝，羅布

來源

2014-01-14 Robbstech

您是否嘗試過親戚而不是固定的？ –

我做了，也沒有工作。它將它們放在同一張幻燈片上，但它們完全進入了錯誤的位置，並且在屏幕大小調整後無法正常工作：/ – Robbstech

我已經上傳了該網站的位置：相對於 – Robbstech

首先儘量只使用一種CSS單位的，即只有像素或只有他們。

試試這個，然後使用相對或絕對，並嘗試如果它的工作。

來源

2014-01-14 22:09:38

我只使用em作爲字體大小，一切都是用px和絕對排列將正確的文本放在另一張幻燈片上... – Robbstech

文本是否需要放在容器中或整張幻燈片是否需要「包裝」？ – Robbstech

right我設法讓他們留在正確的地方，當屏幕是最大化和正常縮放，但他們移動時，我改變屏幕大小或放大....新網站是在http：// begemini .co.uk/workshop/loweclothing/index.html – Robbstech

邏輯似乎是錯誤的。

嘗試位置：相對而不是固定或絕對和設置自動或x％的頂部，左側和右側。

該鍵應該與位置，頂部，左側和右側一起工作。

來源

2014-01-15 02:06:57 Richard

我嘗試過親戚，但我似乎無法讓他們在正確的地方，他們不保留在正確的地方，當我調整屏幕 – Robbstech

要改變每張幻燈片的文字，你應該做的是使用插件提供的回調。在這種情況下，你需要使用回調afterSlideLoad

要爲每張幻燈片的東西，如添加該文本這樣，你就可以使用jQuery決定：

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

爲了位置正確的文本，你可以做絕對定位，因爲部分有position:relative。

來源

2014-01-15 16:18:08 Alvaro

如何讓我的箭頭文字留在fullpage.js的正確位置？

回答

相關問題