在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事件在我发布的链接中乞求这个答案。