console errors using breakpoints

[marcomarasco]

i have an issue using breakpoints. when i define some breakpoints for a carousel i get this errors in console:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
    .scrollbar.set @ swiper.js:2555
    .onResize @ swiper.js:999

i have also notice that console errors are shown in reference to the largest size specified for the breakpoints.

for example if i set two breakpoint one 320px and another one at 550px, console error shows up:

• when i open the page with screen size 900px;
• when i open the page with a screen size of 400px and resize window to overcome 550px.

same issue with swiper.jquery version with the following error

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
    n.extend.buildFragment @ jquery.js:5087
    n.fn.extend.domManip @ jquery.js:5387
    n.fn.extend.append @ jquery.js:5218
    s.scrollbar.set @ swiper.jquery.js?ver=3.2.0:2561
    s.onResize @ swiper.jquery.js?ver=3.2.0:1009

how i can prevent or fix this issue?

[nolimits4web]

Would be good to see live example or JSFiddle with this issue

[puredazzle]

I have the same error, when I add breakpoints I get the following error:
Uncaught TypeError: Illegal invocation

This is my code:

import Swiper from 'swiper';
import {mqXs, mqSm} from '../lib/media-queries';

export default class NewArrivals {
  constructor() {
    this.slideshow = null;
    this.wrapper = document.getElementById('new-arrivals');
  }

  load() {
    if (!this.wrapper) {
      return;
    }

    const slider = this.wrapper.querySelector('.swiper-container');
    const nextButton = this.wrapper.querySelector('.next-slide-button');
    const prevButton = this.wrapper.querySelector('.prev-slide-button');

    if (slider) {
      this.slideshow = new Swiper(slider, {
        speed: 400,
        loop: false,
        slidesPerView: 3,

        nextButton: nextButton,
        prevButton: prevButton,

        breakpoints: {
          [mqXs]: {
            slidesPerView: 1
          },
          [mqSm]: {
            slidesPerView: 1
          }
        }
      });
    }
  }
}

I will try to add a JSFiddle when I am home again.

[nolimits4web]

@puredazzle is this JavaScript? What does this syntax mean?

          [mqXs]: {
            slidesPerView: 1
          },

[mqXs] - ?

[puredazzle]

@nolimits4web I have the media queries saved in a separate file, which I require in the top of my slider.js. It is es6 code.

This is how my media-queries.js looks like:

export const mqXs = 480;
export const mqSm = 768;
export const mqMd = 992;
export const mqLg = 1200;

I have tried with using the break points directly in the Swiper settings also, but same error.

[nolimits4web]

Ok, but you can't define Object keys like that. If they are dynamic, then it should be something like:

var swiperParams = {
    speed: 400,
    loop: false,
    slidesPerView: 3,

    nextButton: nextButton,
    prevButton: prevButton,
    breakpoints: {}
}
swiperParams.breakpoints[mqXs] = {
    slidesPerView: 1
};

this.slideshow = new Swiper(slider, swiperParams);
...

[puredazzle]

I get the same error if I use:

      this.slideshow = new Swiper(slider, {
        speed: 400,
        loop: false,
        slidesPerView: 3,

        nextButton: nextButton,
        prevButton: prevButton,

        breakpoints: {
          480: {
            slidesPerView: 1
          }
        }
      });

If it loads and the screen is less then 480px it works, but if it loads and the screen is bigger it fails.

[nolimits4web]

Then problem somewhere else, as you can see there is no such problem at http://www.idangero.us/swiper/demos/33-responsive-breakpoints.html Would be good to see live example

[puredazzle]

I will try to upload a live example. It seems like the error first triggers in Dom7.on.

[quintenvk]

I, too, can confirm this is an issue. It specifically occurs when you pass a DOM-node as the next and/or prev button; when you pass a selector, all is well. This is problematic because you need to pass a DOM node if you have multiple swiper instances on the page. fiddle to play with.

Comment/uncomment the current next-prev button config parameters. The problem seems to be an object that's being passed to jQuery instead of a DOMnode by the swiper, causing the browser to throw an error because jQuery in turn tries to map an event to this object.

[nolimits4web]

@quintenvk thanks for the fiddle, now it is fixed in dev

[91Abdullah]

Now, it is throwing error: Uncaught TypeError: Cannot read property 'nodeType' of null

[91Abdullah]

Actually, its working fine. It was confused with selector I used ID instead of class and it worked like a charm!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.