Question

我已经在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/

有人可以帮我添加文字而不是图片吗？

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

安装jQuery滑块 - 添加文本而不是图片

1 个答案: