[SOLVED] Swiper on V1.7.1

Questions
1

Hello,

I took over an old project developed in V1.
I added a page on which I put a Swiper Slider - Infinite Loop Mode.

I would like to scroll up the slide every time we switch slides.

Here is my code (HTML) :

> <div class="pages navbar-through">
>   <div data-page="swiper-loop" class="page">
>     <div class="page-content">
>       <div data-pagination=".swiper-pagination" data-loop="true" class="swiper-container swiper-init txt-slider">
>         <div class="swiper-pagination"></div>
>         <div class="swiper-wrapper">
>           <div class="swiper-slide">Slide 1 .... . .. .. . .. . . . . .. .<br><br><br>.....</div>
>           <div class="swiper-slide">Slide 2</div>
>           <div class="swiper-slide">Slide 3</div>
>           <div class="swiper-slide">Slide 4</div>
>           <div class="swiper-slide">Slide 5</div>
>           <div class="swiper-slide">Slide 6</div>
>           <div class="swiper-slide">Slide 7</div>
>           <div class="swiper-slide">Slide 8</div>
>           <div class="swiper-slide">Slide 9</div>
>           <div class="swiper-slide">Slide 10</div>
>         </div>
>       </div>
>     </div>
>   </div>
> </div>

My JS :

var myApp = new Framework7({
  template7Pages: true,
});

var $$ = Dom7;
 
var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true,
  domCache: true,
});


var mySwiper = new Swiper('.swiper-container', {
    onInit: function(swiper){
     console.log('INIT');
    },
    onSlideChangeStart: function(swiper){
      console.log('CHANGE');
      $$('.swiper-slide').scrollTop(0);
    }
});


myApp.onPageBeforeInit('page-slide', function(page) {
  mySwiper.on('slideChangeStart', function(slider){
    console.log('In callBack changeStart');
   $$('.swiper-slide').scrollTop(0);
  })

  console.log(mySwiper);
});

I tried several syntaxes but I can’t solve my problem :

Uncaught TypeError: mySwiper.on is not a function

Can you help me please ?
I already saw this link https://github.com/nolimits4web/swiper/blob/Swiper3/API.md but it did not help me.

2

Try to remove swiper-init class from swiper-container

3

Hello Vladimir,

Thank you for your answer. It works !

1 Like
4

Hello, I have a problem with swiper event. can you help me with them now?