Swiper - methods won't work - mySwiper.slideTo is not a function

Viewed 8626

im using the swiper plugin, but can't seem to get any methods to work.

my jQuery and swiper are added like this:

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

at the bottom of my html. my swiper is initialized like this in document ready:

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

and the function i want to call is:

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

the error i get is:

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

this happens , no matter what method i'm trying to execute. i tried with

mySwiper.update();

aswell.

i'm suspecting the error might come from my swiper/jQuery files, but i also tried redownloading.

thanks in advance

1 Answers

If after

console.log(mySwiper);

It gives [Swipe,Swipe]

So it probably means you are getting an array of swipe objects, the [Swipe,Swipe]...

That aside

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

you do not need to do the each statement if the only thing you are going for is the [0] index, you can just do

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

or

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

as little things can cause your script to have errors in future codes.

Related