CODEWITHSUNDEEP
jqueryjquery-mobile
LiveEn
LiveEn

Reputation: 3253

Swiper JS not working on jquery mobile pagecreate

Im trying add the Swiper JS in to a jquery mobile app. The problem is the below code works

 $(document).ready(function(){

var spv = 3;
//if ($(window).width()<1000) spv=1;
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: spv,
        paginationClickable: true,
        spaceBetween: 30
    });

    swiper.update();
    } );

But it isnt right to have $(document).ready(function(){ for jquery mobile functions... So when i replace it with $(document).on("pagecreate",function( event ) { the slider stops working..

I have setuped a fiddle over here http://jsfiddle.net/livewirerules/37zp46m8/2/

Any help will be appreciated

Upvotes: 0

Views: 1148

Answers (1)

deblocker
deblocker

Reputation: 7705

It is because the page container with display: none hasn't yet a computed size. So, i will propose you here a variant solution to the this classic problem: just set briefly display block and reset it soon.

$(document).on("pagecreate", "#page-two", function() {
  $(this).toggleClass("size-hidden",true);
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30
  });
  $(this).toggleClass("size-hidden",false);
});
.size-hidden{
  display:block !important;
  visibility: hidden !important;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* just to hide this boring scrollbar in code snippet */
html,body {
  overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.jquery.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>First Page</h3>
      <a href="#page-two" class="ui-btn-right">Next</a>
    </div>
    <div data-role="content">
      <a href="#page-two" data-transition="flip" class="ui-btn ui-corner-all ui-mini">GOTO Swiper</a>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
  </div>
  <div data-role="page" id="page-two">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>Second Page</h3>
      <a href="#" data-direction="reverse" data-rel="back" class="ui-btn-left">Back</a>
    </div>
    <div data-role="content">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="investment_list">
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%9780&w=300&h=80" />
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions