Swiper - 方法不起作用 - mySwiper.slideTo 不是函数答案

【问题标题】：Swiper - methods won't work - mySwiper.slideTo is not a functionSwiper - 方法不起作用 - mySwiper.slideTo 不是函数
【发布时间】：2017-09-30 11:45:27
【问题描述】：

我正在使用 swiper 插件，但似乎无法使用任何方法。

我的 jQuery 和 swiper 是这样添加的：

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

在我的 html 的底部。我的 swiper 在准备好的文档中像这样初始化：

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 ,
});

我要调用的函数是：

$('.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%" });

我得到的错误是：

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

无论我尝试执行什么方法，都会发生这种情况。我试过了

mySwiper.update();

也是。

我怀疑错误可能来自我的 swiper/jQuery 文件，但我也尝试重新下载。

提前致谢

【问题讨论】：

您的航点是否也在 document.ready 中初始化，以避免在创建 swiper 变量之前执行它？如果您在航点调用中执行console.log(mySwiper)，您是否在控制台中得到任何内容，或者此时 mySwiper 未定义？
我在方法调用之前添加了 console.log(mySwiper) 并得到：(2) [Swiper, Swiper]
所以这可能意味着您正在获得一个滑动对象数组，即 [Swipe,Swipe]... 除了 $('video').each(function() { $(this)[ 0].pause(); });如果您要做的唯一事情是 [0] 索引，则不需要执行每个语句，您可以执行 $('video')[0].pause() 或 $('video').eq (0).pause();因为小事情可能会导致您的脚本在以后的代码中出现错误。
有一个错字...循环：真，（如果您在源代码中有逗号，请将其删除，因为它会产生这种无意义的错误）
我遇到了与 OP 类似的问题。看到 Ezekeil 的评论后，我注意到我有一系列 swiper 对象。通过执行 mySwiper[index].slideTo(...) 我的问题得到了解决。 @Ezekiel 我建议将其发布为答案！

标签： javascript jquery methods swiper

【解决方案1】：

如果之后

console.log(mySwiper);

它给出[滑动，滑动]

所以这可能意味着您正在获得一个滑动对象数组，即 [Swipe,Swipe]...

除此之外

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

如果您只需要 [0] 索引，则不需要执行每个语句，您可以这样做

$('video')[0].pause();

或

$('video').eq(0).pause();

因为小事情可能会导致您的脚本在以后的代码中出现错误。

【讨论】：