使用bxslider时图像上没有箭头

我刚刚了解了bxslider，并通过阅读文档制作了我的第一张幻灯片。但我不能看到的图像左，右箭头，使下图像可以通过点击显示为在本例所示：This Link 使用bxslider时图像上没有箭头

这里是我的代码：

<!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>

任何之所以为什么我不能看到这些“双箭”，当点击时给出下一张或上一张幻灯片？我无法真正发现我可能写的任何“不同”，或者我可能已经忘记的任何东西。谢谢。

来源

2014-11-01 Akshay Arora

虽然您提供了您的代码，但不容易猜测为什么不显示箭头。一个简单的原因可能就是箭头的图像丢失/错位，所以只需检查图像controls.png是否在正确的位置。 bxslider使用this image显示箭头 - http://bxslider.com/lib/jquery.bxslider.css线106：

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

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

要检查控制已经在滑块和只有图像丢失，您可以使用Web开发工具检查，如果下面的div里面的<div class="slider">

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

来源

2014-11-01 20:49:30

非常感谢你，当我创建图像文件夹内的css文件夹，它工作正常 – stom 2015-04-27 07:53:22

我和你同样的问题，固定将controls.png放在与jquery.bxslider.css一起粘贴在一起的lib文件夹中。

来源

2015-10-20 04:04:48 cheehung

使用bxslider时图像上没有箭头

回答

相关问题