Framework7 swiper not working

Question

I am using the (pretty cool) so far Framework7 lib for an hybrid mobile app...but I came to an issue. In the JS, I've put a line for the swiper

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

In the HTML, I have a page inside a view that is like this

<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>

When I load that, I can see my first slide, but if I swipe to the right, I don't have any effect : the second slide is coming but attached to my finger, like if the 2 swiper-slide was sticked.

Even more bizarre, if I put this in the page :

<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>

I can't swipe at all anymore to see the "slide 2".

Does anybody have a clue to help me ? It's driving me nuts...

Thanks for your help,

J.

Answer 1

If your slider is in index page. then you need to call update swiper to work. You have intialised swiper in js. u can also do the same in html too. for update the swiper you can use below code

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

Here swiper tab is the class name for swiper container.

It should work fine.

Answer 2

Well, first thing that is obvious is that you miss swiper pagination. If this doesn't help, it might be a second carousel on the same page. Don't have other ideas and the code is insufficient for an exact resolution