이미지 갤러리 swiper가 jQueryMobile 페이지에 표시되지 않습니다.

내 jQueryMobile 페이지에 Swiper by idangero.us을 사용하고 있습니다.이미지 갤러리 swiper가 jQueryMobile 페이지에 표시되지 않습니다.

내 HTML 파일은 두 개의 "페이지"로 구성됩니다. 그 중 한 명은 이미지 갤러리가 있어야합니다. 그것은 이미지를보기에 잘 작동하고 슬라이더는 jQueryMobile없이 기능적입니다. 그러나 jQueryMobile을 사용하자마자 이미지가 더 이상 나타나지 않습니다.

내가 발견 한 가장 유사한 문제는 다음과 같습니다. Swiper not working in Jquery Mobile 하지만 해결책을 찾는 데 도움이되지 않았습니다. 누군가가 내게 왜 이것이 작동하지 않는지 설명 할 수 있습니까?

이 내 HTML입니다 :

이

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/idangerous.swiper.css"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 

    <style> 
/* Demo Styles */ 
html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    line-height: 1.5; 
    position: relative; 
    height: 100%; 
} 
.swiper-container { 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    text-align: center; 
} 
.swiper-slide .title { 
    font-style: italic; 
    font-size: 42px; 
    margin-top: 80px; 
    margin-bottom: 0; 
    line-height: 45px; 
} 
.pagination { 
    position: absolute; 
    z-index: 20; 
    left: 10px; 
    bottom: 10px; 
} 
.swiper-pagination-switch { 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    border-radius: 8px; 
    background: #222; 
    margin-right: 5px; 
    opacity: 0.8; 
    border: 1px solid #fff; 
    cursor: pointer; 
} 
.swiper-visible-switch { 
    background: #aaa; 
} 
.swiper-active-switch { 
    background: #fff; 
} 
    </style> 
</head> 
<body> 

<!-- Start page--> 
    <div data-role="page" id="page_start"> 

      <article data-role="content"> 
       <ul data-role="listview" data-inset="true" >    
        <li> 
         <a href="#page2"> 
          <h1>Cabmontering</h1> 
           <img src="favicon.ico" alt="Min Pin" /> 
           <p></p> 
         </a> 
        </li> 
       </ul> 
      </article> 
     </div> <!--End of startpage--> 

    <!--Page 2--> 
     <div data-role="page" id="page2"> 
       <div class="swiper-container"> 
       <div class="swiper-wrapper"> 

        <div class="swiper-slide">  
        <img src="bilder/cabmontering/3_2.png" width="100%"/> 
        </div> 

        <div class="swiper-slide"> 
        <img src="bilder/cabmontering/4_2.png" width="100%"/> 
        </div> 

        <div class="swiper-slide"> 
        <img src="bilder/cabmontering/6_2.png" width="100%"/> 
        </div> 

        <div class="swiper-slide"> 
        <img src="bilder/cabmontering/1.png" width="100%"/> 
        </div> 

        <div class="swiper-slide"> 
        <img src="bilder/cabmontering/2.png" width="100%"/> 
        </div> 

       </div> 
       <div class="pagination"></div> 
       </div> <!--End of "swiper_wrapper"--> 
      </div> <!--End of page 2--> 


    <script src="js/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
    <script src="js/idangerous.swiper-2.1.min.js"></script> 
    <script> 
    var mySwiper = new Swiper('.swiper-container',{ 
    pagination: '.pagination', 
    paginationClickable: true, 
    loop: true 
    }) 
    </script> 
</body> 
</html>

출처

2014-05-09 Zerato

플러그인가 초기화되지 않는, 당신은 pageshow에 swiper 코드를 래핑 한 번만 .one()해야합니다. 둘째로, JS 도서관을 head에 두십시오.

<head> 
    <script src="js/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
    <script src="js/idangerous.swiper-2.1.min.js"></script> 
    <script> 
    $(document).one("pageshow", "#page2", function() { 
     var mySwiper = new Swiper('.swiper-container',{ 
      pagination: '.pagination', 
      paginationClickable: true, 
      loop: true 
     }); 
    }); 
    </script> 
</head>

출처

2014-05-09 21:40:54 Omar

감사합니다. – Zerato

하지만 다른 이미지가있는 스 와이프가있는 페이지가 여러 개인 경우 어떻게해야합니까? "두 번째 스 와이프"는 정상적인 이미지로만 나타납니다. – Zerato

동일하게하십시오. 페이지 쇼 이벤트에서 페이지 ID 만 변경하십시오. – Omar

이미지 갤러리 swiper가 jQueryMobile 페이지에 표시되지 않습니다.

답변

관련 문제