0

www.bxslider.com の jquery ファイルを使用して、自分の Web サイトにスライダーを作成しました。

bx スライダーには、次のように明確に書かれています。

スライドには、画像、ビデオ、または HTML コンテンツを含めることができます

現在、このコードでは、bxslider Web サイトからの画像があります。しかし、それにテキストを追加すると、もう機能しません。

ここに私の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/

画像の代わりにテキストを追加するのを手伝ってもらえますか?

4

1 に答える 1

1

コードに小さな修正を加えましたが、動作しています。透明な画像を追加して（サイズが小さくなるように）、クラスを追加するか、スタイルタグを直接追加して非表示にする必要があります。これは、使用しているプラ​​グインが常に「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-06T10:34:06.043 に答える