Image gallery swiper not showing on jQueryMobile page

问题

I am using Swiper by idangero.us on my jQueryMobile page.

My HTML-file consists of two "pages". One of them is supposed to have an image gallery. It works fine to view the images, and the slider is functional, without jQueryMobile. But as soon as I use jQueryMobile, the images are no longer showing up.

The most similar problem I've found is this: Swiper not working in Jquery Mobile but it didn't help me find a solution. Can someone explain to me why this doesn't work?

This is my 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>

回答1:

The plugin isn't being initialized at all, you need to wrap swiper code in pageshow and only one time .one(). Second of all, place JS libraries in 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>

来源：https://stackoverflow.com/questions/23573952/image-gallery-swiper-not-showing-on-jquerymobile-page

标签

html

jquery-mobile

swiper