i'm setting up swiper.js library (/) and i have a problem with settings. I'm try to setup swiper to start autoplay on desktop size and stop autoplay on mobile (eg. 768px down). Everything work fine on desktop and even if you try responsive without refresh page. Problem begin on mobile size after page refresh. Swiper ignore all settings until page resize.

Demo:

var swiper = new Swiper('.swiper-container', {
      autoplay: {
          delay: 1000
        },
      breakpoints: {
        768: {
          autoplay: {
            delay: false
          }
        }
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

Anyone know what i'm doing wrong? Thanks

i'm setting up swiper.js library (http://idangero.us/swiper/) and i have a problem with settings. I'm try to setup swiper to start autoplay on desktop size and stop autoplay on mobile (eg. 768px down). Everything work fine on desktop and even if you try responsive without refresh page. Problem begin on mobile size after page refresh. Swiper ignore all settings until page resize.

Demo: https://codepen.io/anon/pen/WWdera

var swiper = new Swiper('.swiper-container', {
      autoplay: {
          delay: 1000
        },
      breakpoints: {
        768: {
          autoplay: {
            delay: false
          }
        }
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

Anyone know what i'm doing wrong? Thanks

• javascript
• swiper.js

2 Answers 2

This works after reboot. You need to change the autoplay object to boolean

var swiper = new Swiper('.swiper-container', {
  autoplay: {
      delay: 1000
    },
  breakpoints: {
    768: {
      autoplay: false
    }
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

In swiper v9.2.2, and with help from @MNN TNK's ment, I had to use the following to disable autoplay on mobile...

var swiper = new Swiper('.swiper-container', {
  autoplay: {
    enabled: false,
  },
  breakpoints: {
    768: {
      autoplay: {
        enabled: true,
        delay: 1000,
      }
    }
  },
  ...
}