javascript - Swiper.js breakpoints autoplay issue - Stack Overflow

admin管理员组

文章数量:1401417

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

Share Improve this question Follow asked Apr 16, 2019 at 10:37 A. MrazA. Mraz 3322 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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,
      }
    }
  },
  ...
}

本文标签： javascriptSwiperjs breakpoints autoplay issueStack Overflow