Jquery에서 모바일 용 아이콘 슬라이더 설정

Question

4 개의 아이콘이 변경 될 때마다 변경되는 4 개의 아이콘과 작은 원이있는 모바일 슬라이더에 대해 만들고 싶습니다. () 에서 발견 및 예시 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> 

을 파일에 추가 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 작업이에

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

: http://jsfiddle.net/Gajotres/CPpBD/

은 기본적으로 당신이해야 할 모든이 변경입니다

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

당신은 읽을 수보다 약 pageshow 내가 게시 한 링크의 이벤트 이 대답을 구걸.