admin管理员组

文章数量:1317915

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

Here is my code: 

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

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

Here is my code: 

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

  • javascript
  • jquery
  • css
  • bxslider
Share Improve this question edited Aug 29, 2018 at 7:50 matthias_h 11.4k9 gold badges23 silver badges40 bronze badges asked Nov 1, 2014 at 20:20 Akshay AroraAkshay Arora 1,9451 gold badge16 silver badges31 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

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./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);
}

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.

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>

I have same problem with you, fixed by put the controls.png inside the lib folder which is stick together with jquery.bxslider.css.

本文标签： javascriptNo arrow on images when using bxsliderStack Overflow

版权声明：本文标题：javascript - No arrow on images when using bxslider - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742002184a2411235.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。