2017-08-08 19 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

入力いただきありがとうございますが、まだテストの際に空白のページが表示されます。 –

関連する問題