2017-08-08 91 views
0

我试过了所有我能想到的和bxSlider都无法工作的东西。我已经把它分解成了div内的滑块,我只是在预览时得到一个空白页面。我测试了路径,他们是正确的。bxSlider尽管尽了最大的努力仍不能正常工作

我的HTML:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.bxslider.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.bxslider').bxSlider({ 
       auto: true, 
       autoControls: true 
      }); 
     }); 
    </script> 
</head> 

<body> 
<div id="sliderbox"> 
    <ul class="bxslider"> 
     <li><img src="images/1.jpg" width="800" height="400" title="Hello World" /></li> 
     <li><img src="images/2.jpg" width="800" height="400" title="Hello World" /></li> 
     <li><img src="images/3.jpg" width="800" height="400" title="Hello World" /></li> 
    </ul> 
</div>   

</body> 
</html> 

回答

0

它是好的,保持jQuery和bxslider之前.... </body>.

<script type="text/javascript" src="js/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery.bxslider.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.bxslider').bxSlider({ 
        auto: true, 
        autoControls: true 
       }); 
      }); 
     </script> 
</body> 

Here is The Link to Working Demo of Bx slider

HTML

<ul class="bxslider"> 
    <li><img src="https://via.placeholder.com/200?text=1" /></li> 
    <li><img src="https://via.placeholder.com/200?text=2" /></li> 
    <li><img src="https://via.placeholder.com/200?text=3" /></li> 
    <li><img src="https://via.placeholder.com/200?text=4" /></li> 
    <li><img src="https://via.placeholder.com/200?text=5" /></li> 
    <li><img src="https://via.placeholder.com/200?text=6" /></li> 
    <li><img src="https://via.placeholder.com/200?text=7" /></li> 
    <li><img src="https://via.placeholder.com/200?text=8" /></li> 
    <li><img src="https://via.placeholder.com/200?text=9" /></li> 
    <li><img src="https://via.placeholder.com/200?text=10" /></li> 
</ul> 

Jquery

$(document).ready(function(){ 
    $('.bxslider').bxSlider({ 
    auto: true, 
    autoControls: true 
    minSlides: 3, 
    maxSlides: 9, 
    slideWidth: 170, 
    slideMargin: 10, 
    ticker: false, //true 
    speed: 20000 
    }); 
}); 
+0

感谢您的输入,但在测试时我仍然得到空白页。 –

相关问题