使用bxslider时图像上没有箭头

问题描述：

我刚刚了解了bxslider并通过阅读文档制作了我的第一张幻灯片。但我无法在图像上看到左右箭头，以便点击显示下一张图像，如下例所示：此链接

I just learnt about bxslider and made my first slideshow by reading the docs. But I cant see the right and left arrows on the images so that the next image can be shown by a click as shown in this example at: This Link

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>New seven Wonders of the world</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
  <li><img src="pic2.jpg" title="Great Wall of China, China"/></li>
  <li><img src="pic3.jpg" title="Petra, Jordan" /></li>
  <li><img src="pic4.jpg" title="Colosseum, Rome, Italy" /></li>
  <li><img src="pic5.jpg" title="Chichen Itza, Mexico" /></li>
  <li><img src="pic6.jpg" title="Machu Pichu, Peru" /></li>
  <li><img src="pic7.jpg" title="Taj Mahal, India" /></li>
  <li><img src="pic8.jpg" title="Christ the redeemer, Brazil" /></li>
  <li><img src="pic1.jpg" title="Giza Necropolis, Egypt (Honorary title only)" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({slideWidth: 700,auto: true,
  mode: 'fade', captions: true, speed: 700});
});
</script>
</body>
</html>

我无法看到这两个箭头，当点击时，给出下一个或上一个滑动？我真的找不到我可能写的任何不同或我可能忘记的任何东西。

Any reason why I can't see those 2 arrows which, when clicked, give the next or previous slide? I couldn't really find out anything different that I may have written or anything that I may have forgot.

答

虽然你提供了你的代码，不容易猜到为什么没有显示箭头。一个简单的原因可能是箭头的图像丢失/错位，所以只需检查图像 controls.png 是否位于正确的位置。 bxslider使用此图片显示箭头 - http://bxslider.com/lib/jquery.bxslider.css 第106行：

Though you provided your code, it's not easy to guess why the arrows aren't displayed. One simple reason could just be that the image for the arrows is missing / misplaced, so just check if the image controls.png is at the correct location. bxslider uses this image to display the arrows - http://bxslider.com/lib/jquery.bxslider.css line 106:

.bx-wrapper .bx-prev {
background: url("images/controls.png") no-repeat scroll 0 -32px rgba(0, 0, 0, 0);
}

如果您不想调整CSS，可以添加目录bxslider.css所在文件夹中的 images ，并将此图像复制到此文件夹。

If you don't want to adjust the CSS, you can add a directory images in the folder where your bxslider.css is located and copy this image to this folder.

要检查控件是否已经位于滑块上且只缺少图像，可以使用web开发工具查看以下div是否在< div class =slider>

To check if the controls are already at the slider and only the image is missing, you can check with web dev tools if following div is inside the <div class="slider">

<div class="bx-controls-direction">
  <a href="" class="bx-prev">Prev</a>
  <a href="" class="bx-next">Next</a>
</div>

使用bxslider时图像上没有箭头

相关推荐