Framework7のスワイパーが動作しない

Question

私は、これまでのフレームワーク7のlibをハイブリッドなモバイルアプリケーションに使用しています...しかし、私は問題に遭遇しました。 はJSでは、私はHTMLでswiper

var slider=new Swiper(".swiper-container"); 

ためにラインを入れている、私は、私ができることをロードすると、この

<div class="pages navbar-through toolbar-through"> 
      <!-- Page, "data-page" contains page name --> 
      <div class="page"> 
       <!-- Scrollable page content --> 
        <div class="page-content"> 
         <!-- Slider --> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper"> 
           <div class="swiper-slide"> 
            <div class="content-block"> 
             <div class="creator" style="float:left"> 
              <img src="http://onexchange-dev.azurewebsites.net/image/julien_boyreau.jpg"> 
             </div> 
             <div style="float:left;margin-top:2%;margin-left:2%">Julien Boyreau</div> 
             <div style="float:right;width:20%"><a href="#" class="button button-round trust">Trust</a></div> 
             <br> 
            </div> 
            <div class="content-block"> 
             <div class="content-block-inner"> 
              <h2>Can we save the Internet ?</h2> 
              <img style="width:100%" class="teaser" src="http://www.savetheinternet.com/sites/default/files/styles/1275_wide/public/topics/topic_internet-freedom.png?itok=O7Tiv8Vv"> 
              <p> 
               Back in 1964, in a time of cold war, Paul Baran invented packet-switching communications. This paved the way to a radically new way of distributed communications and a formidable move to democratization. 
              </p> 
              <p> 
               10 years later, Bob Kahn and Vint Cerf standardized eventually this approach with TCP/IP protocols. This provided a common stack onto which one could build at the edge whatever applications, where the network would only transmit the packets. 

              </p> 
              <p> 
               15 years later, Tim Berners-Lee built one of these applications, WWW. Many have forgotten that this was half the coin of what he was working on, the consumption part, leaving aside the other half, the creation part, who was baked into ENQUIRE. 
              </p> 
              <p> 
               In the next 15 years, the Internet grew on top of these technologies, thanks to decentralized PCs to start the digital revolutionnary era. 
              </p> 
              <p>Since then, the Internet has mostly moved backwards.</p> 
              <p> 
               ISPs, having never accepted the logical consequence of Baran’s invention (the best IP network is the dumbest one), have focused their profits to integrate upward to “Services” and “Content” instead of downward to faster & cheaper & more pervasive utilitarian IP service (In 2016, IPv6 is still not pervasive and I have no 4G in Paris’ subway). 
              </p> 
             </div> 
            </div> 
           </div> 
           <div class="swiper-slide"> 

            <p style="text-align:center">Slide 2</p> 


           </div> 
          </div> 
         </div> 
        </div> 
      </div> 

のようなものであるビュー内のページを持っています私の最初のスライドを見てください。しかし、もし私が右にスワイプすると、私は何の効果もありません。2番目のスライドは来ていますが、2個のスワイパースライドが突き刺されたように、

さらに奇妙な、私はページでこれを置く場合：

<div class="pages navbar-through toolbar-through"> 
      <!-- Page, "data-page" contains page name --> 
      <div class="page"> 
       <!-- Scrollable page content --> 
        <div class="page-content"> 
         <!-- Slider --> 
         <div class="swiper-container"> 
          <div class="swiper-wrapper"> 
           <div class="swiper-slide"> 
             slide 1 
           </div> 
           <div class="swiper-slide"> 

            <p style="text-align:center">Slide 2</p> 


           </div> 
          </div> 
         </div> 
        </div> 
      </div> 
     </div> 

私は、「スライド2」を参照してくださいもはや全くスワイプすることはできません。

誰かが私を助ける手掛かりを持っていますか？明らかであるJ.

Answer 1

さて、まず最初に、あなたはswiperページネーションを逃すということであるあなたの助けを

おかげで、

...ナット私を運転です。これが役に立たない場合は、同じページの2番目のカルーセルかもしれません。他のアイデアは持っておらず、コードは正確な解像度には不十分です

Answer 2

スライダーがインデックスページにある場合。更新するにはswiperを呼び出す必要があります。あなたはjsでswiperをintialisedしています。あなたもhtmlで同じことをすることができます。スワイパーを更新するには、以下のコードを使用してください。

$$('.swiperTab').on('show', function(){ 
    $$(this).find('.swiper-container')[0].swiper.update(); 
}); 

スワイパータブはスワイパーコンテナのクラス名です。

正常に動作するはずです。