無法獲得bxSlider插件呈現

下面是該網站得到插件：http://bxslider.com/examples/image-slideshow-captions 無法獲得bxSlider插件呈現

我按照所有方向，以我的知識。

首先，包含的所有腳本在視圖頁面源上都可以很好地呈現。所以jquery調用必須有錯誤。但是，在控制檯上的firefox螢火蟲絕對沒有錯誤。

這裏是jQuery庫，css和javascript調用。此外，一切都在頁面的頭部，我正在使用正確的庫版本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="components/jquery.bxslider/jquery.bxslider.min.js"></script> 
<link href="components/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 


<script> 
    $(document).ready(function() { 
    //boxslider for portfolio 
    $('#bxslider').bxSlider({ 
    mode: 'fade', 
    captions: true 

    }); 
    }); 

</script>

標記HTML：

<div class="container"> 
    <h2>Some of Our Projects</h2> 
    <ul id="bxslider"> 
     <li><img src="../../images/shots/ecommerce.png" title="Happy trees" /></li> 
     <li><img src="../../images/shots/templateviewthread.jpg" title="Funky roots" /></li> 
     <li><img src="../../images/shots/templateprofile.jpg" title="The long and winding road" /></li> 
     <li><img src="../../images/shots/trees.jpg" title="Happy trees" /></li> 
     <li><img src="../../images/shots/valleyvuecoatings.jpeg" title="Happy trees" /></li> 
     <li><img src="../../images/shots/thegazebo.jpeg" title="Happy trees" /></li> 
    </ul> 
</div> 
<!--/.container-->

來源

2014-10-12 Bobby

你可以在小提琴上重拍這個問題嗎？這是本地嗎？我在很多網站上使用了bxSlider，並沒有問題:) – 2014-10-12 11:00:17

Bojan Petkovski當然，我可以做一個小提琴。這是本地和Laravel框架。儘管如此，這應該不重要。 – Bobby 2014-10-12 11:03:33

Bojan Petkovski http://jsfiddle.net/ujtdq0wr/ – Bobby 2014-10-12 11:06:32

所以，你的小提琴是行不通的。這是一個工作示例http://jsfiddle.net/ujtdq0wr/2/

首先，如果您是在本地工作，你需要到http添加從谷歌的鏈接的API

所以從這個

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

這個

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

你可以檢查bxslider腳本和css文件是否加載在你的頁面上:)

在你面前SO對行260的導航//點擊動作模板文件

UPDATE

呼叫bxSlider只是複製下面:)

$('#bxslider').bxSlider({ 
    mode: 'fade', 
    captions: true 
});

來源

2014-10-12 11:14:55

哎呀，我有一個錯字，但沒有解決它。 – Bobby 2014-10-12 11:20:43

這裏是我的模板，以獲得更好的看法，也許看到發生了什麼。 http://laravel.io/bin/LN8Kx – Bobby 2014-10-12 11:22:13

我注意到你錯過了開始的身體標記。其次你如何插入頁面/滑塊的內容？ – 2014-10-12 11:25:30

代碼我設法運行此插件在jsfiddle。 http://jsfiddle.net/csdtesting/vs9j9dzu/ 採取llok腳本加載和jQuery版本，並嘗試與您的網站相同。

$(document).ready(function() { 
     //boxslider for portfolio 
     $('.bxslider').bxSlider({ 
     mode: 'fade', 
     captions: true 

     }); 
    }); 

    <ul class="bxslider"> 
     <li> 
     <img src="http://bxslider.com/images/730_200/hill_road.jpg" title="Funky roots" /> 
     </li> 
     <li> 
     <img src="http://bxslider.com/images/730_200/trees.jpg" title="The long and winding road" /> 
     </li> 
     <li> 
     <img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /> 
     </li> 
    </ul>

來源

2014-10-12 11:15:06

謝謝，但沒有變化。我有正確的庫版本以及正確的css和js文件。 – Bobby 2014-10-12 11:22:54

無法獲得bxSlider插件呈現

回答

相關問題