在Jquery中爲手機設置一個圖標滑塊

Question

我想創建一個帶有4個圖標和小圓圈的移動滑塊，它會在每改變4個圖標時更改（也應該與spiwe一起工作） 已找到並且在 FlexSlider http://flexslider.woothemes.com/index.html

構建映像到我的index.html頁面的列表，並添加CSS文件

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="slide1.jpg" /> 
    </li> 
    <li> 
     <img src="slide2.jpg" /> 
    </li> 
    <li> 
     <img src="slide3.jpg" /> 
    </li> 
    <li> 
     <img src="slide4.jpg" /> 
    </li> 
    </ul> 
</div> 

JavaScript函數中的index.html

$(document).ready(function() { 
        $('.flexslider').flexslider({ 
         animation: "slide", 
         animationLoop: false, 
         itemWidth: 80, 
         itemMargin: 5 
        }); 
       }); 

但它沒有在網站上工作，它設置了一個白色的行沒有任何圖像......任何想法，我的錯誤是什麼？

Answer 1

Document ready不能jQuery Mobile使用，因爲jQuery Mobile如何處理頁面加載。

要了解更多有關頁面事件，其區別記錄準備看看這個ARTICLE或發現它HERE。

工作jsFiddle例如：http://jsfiddle.net/Gajotres/CPpBD/

基本上所有你需要做的就是改變這種：

$(document).ready(function() { 
    $('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     itemWidth: 80, 
     itemMargin: 5 
    }); 
}); 

這樣：

$(document).on('pageshow', '#index', function(){  
    $('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: false 
    }); 
}); 

你可以閱讀更多關於pageshow事件在我發佈的鏈接中乞求這個答案。