安裝jQuery的滑塊 - 添加文本，而不是圖片

我已成功通過jQuery的文件幫助下創建一個滑塊在我的網站從www.bxslider.com安裝jQuery的滑塊 - 添加文本，而不是圖片

在BX滑塊寫得很清楚的是：

幻燈片可以包含圖像，視頻或HTML內容

此代碼現在，我有bxslider網站的圖像。但是當我向它添加一些文本時，它不再工作。

這裏是我的HTML文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://bxslider.com/lib/jquery.bxslider.min.js"></script> 
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> 


<ul class="bxslider"> 
    <li><img src="http://bxslider.com//images/730_200/hill_trees.jpg" /></li> 
    <li><img src="http://bxslider.com//images/730_200/me_trees.jpg" /></li> 
    <li><img src="http://bxslider.com//images/730_200/houses.jpg" /></li> 
</ul> 

<div class="outside"> 
    <h3>This div is outside of the slider</h3> 
    <p><span id="slider-prev"></span> | <span id="slider-next"></span></p> 
</div> 


<script> 
    $('.bxslider').bxSlider({ 
    nextSelector: '#slider-next', 
    prevSelector: '#slider-prev', 
    nextText: 'Onward →', 
    prevText: '← Go back' 
}); 
</script>

，這裏是小提琴：http://jsfiddle.net/gr8_boi52/nwvW9/

有人可以幫助我將文本添加到它，而不是圖像？

來源

2013-06-06 Mohammad Dohadwala

http://jsfiddle.net/Jayx/nwvW9/2/有什麼不對？似乎工作正常 – Jayx

現在嘗試，http://jsfiddle.net/gr8_boi52/nwvW9/6/ 它現在不工作，因爲某種原因 –

我擺弄這一點以及。如果文本處於第一個位置，滑塊似乎不能正確加載。 –

我已經添加了一個小的修復程序到您的代碼，它工作。你必須添加一個透明的圖像（所以尺寸變小），並通過添加一個類或直接添加樣式標籤來隱藏它。這是有效的，因爲你正在使用的插件，總是找到'img'標籤來顯示圖像。

這是我爲第一個'li'編輯的代碼。

<li> 
    <img src="http://bxslider.com//images/730_200/hill_trees.jpg" style="display:none" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec magna ut orci porttitor ..... </p> 
</li>

這裏是更新的jsfiddle鏈接：

http://jsfiddle.net/nwvW9/11/

來源

2013-06-06 10:34:06 Jaydev

哇，工作很好，不錯的伎倆 –

安裝jQuery的滑塊 - 添加文本，而不是圖片

回答

相關問題