2017-09-30 4 views
1

Im utilisant le plugin de swiper, mais ne semble pas avoir de méthodes pour fonctionner.Swiper - les méthodes ne fonctionneront pas - mySwiper.slideTo n'est pas une fonction

mon jQuery et Chipeur sont ajoutés comme ceci:

<script src="jquery-3.2.1.min.js" type="text/javascript"></script> 
<script src="swiper.jquery.js" type="text/javascript"> 

au fond de mon html. mon Chipeur est initialisé comme celui-ci dans le document prêt:

mySwiper = new Swiper('.swiper-container', { 
    direction: 'horizontal', 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    pagination: '.swiper-pagination', 
    paginationType: 'fraction', 
    grabCursor: true, 
    keyboardControl: true,   
    onSlideChangeStart: function(){ 

    $('video').each(function() { 
     $(this)[0].pause(); 
    }); 

    $(".swiper-slide-active video").each(function() { 
     $(this)[0].play(); 
    }); 
     if ($(".swiper-slide-active").hasClass("layout4")) 
     { 
      video_visible = 1; 
      $(".section").css("background-color", "black"); 
      $("body").css("color", "white"); 
      $(".swiper-button-prev").css("background-image", "url(img/leftArrowW.png)"); 
      $(".swiper-button-next").css("background-image", "url(img/rightArrowW.png)"); 
      $(".swiper-button-prev").css("opacity", "0.25"); 
      $(".swiper-button-next").css("opacity", "0.25"); 
      $(".headline").css("opacity", "0.25"); 
      $(".swiper-pagination").css("opacity", "0.25"); 
     } 
     else { 
      video_visible = 0; 
      $(".section").css("background-color", "white"); 
      $("body").css("color", "black"); 
      $(".section .swiper-button-prev").css("background-image", "url(img/leftArrow.png)"); 
      $(".section .swiper-button-next").css("background-image", "url(img/rightArrow.png)"); 
      $(".swiper-button-prev").css("opacity", "1"); 
      $(".swiper-button-next").css("opacity", "1"); 
      $(".headline").css("opacity", "1"); 
      $(".swiper-pagination").css("opacity", "1"); 
     } 
     if ($(".swiper-slide-active").hasClass("layout7")) 
     { 
      $(".layout7").css("background-color", "#e0e8eb"); 
     } 

    }, 
    loop: true , 
});  

et la fonction que je veux appeler est:

$('.section .down').waypoint(function(direction){ 
    if ($(".swiper-slide-active").hasClass("layout4")){ 
     if (direction == 'down') { 
      if (!once_d){ 

       mySwiper.slideTo(1,100,false); 

       $(".section").css("background-color", "white"); 
       $("body").css("color", "black"); 
       $(".swiper-button-prev").css("background-image", "url(img/leftArrow.png)"); 
       $(".swiper-button-next").css("background-image", "url(img/rightArrow.png)"); 
       $(".swiper-button-prev").css("opacity", "1"); 
       $(".swiper-button-next").css("opacity", "1"); 
       $(".headline").css("opacity", "1"); 
       $(".swiper-pagination").css("opacity", "1"); 
       $('video').each(function() { 
       $(this)[0].pause(); 
       }); 
       video_visible = 0; 
       once_d = true; 
      } 
      else{ 
       return; 
      } 
     } 
    } 
}, { offset: "-25%" }); 

l'erreur que je reçois est:

Uncaught TypeError: mySwiper.slideTo is not a function 
at Waypoint.$.waypoint.offset [as callback] 

cela se produit, peu importe la méthode que j'essaie d'exécuter. j'ai essayé avec

mySwiper.update(); 
aswell

.

Je soupçonne que l'erreur peut provenir de mes fichiers swiper/jQuery, mais j'ai aussi essayé de redownloader.

merci à l'avance

+0

Votre waypoint est-il également initialisé dans le document.ready pour éviter qu'il ne soit exécuté avant la création de la variable swiper? Si vous faites un 'console.log (mySwiper)' dans votre appel de waypoint, avez-vous quelque chose dans la console ou mySwiper est-il indéfini à ce moment-là? – delinear

+0

J'ai ajouté console.log (mySwiper) juste avant mon appel de méthode et j'ai: (2) [Swiper, Swiper] –

+0

Donc, cela signifie probablement que vous obtenez un tableau d'objets de balayage, le [Balayage, Balayage] ... de côté $ ('video'). each (function() { $ (this) [0] .pause(); }); vous n'avez pas besoin de faire chaque instruction si la seule chose que vous recherchez est l'index [0], vous pouvez jusr faire $ ('video') [0] .pause() ou $ ('video'). (0) .pause(); car de petites choses peuvent causer des erreurs dans les futurs codes. – Ezekiel

Répondre

1

Si après

console.log(mySwiper); 

Il donne [Swipe, Swipe]

Donc, cela signifie probablement que vous obtenez un tableau d'objets de passage rapide, le [Swipe, Swipe] ...

Ce côté

$('video').each(function() { $(this)[0].pause(); }); 

vous n'avez pas besoin de faire chaque instruction si la seule chose que vous recherchez est l'index [0], vous pouvez jusr faire $ ('video') [0] .pause() ou $ ('video') .eq (0) .pause(); car de petites choses peuvent causer des erreurs dans les futurs codes.