Image gallery swiper not showing on jQueryMobile page

StackOverflow https://stackoverflow.com/questions/23573952

  •  19-07-2023
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top