Swiper breakpoints not working for custom elements

[jehoshua-shey]

I'm using SwiperJS custom elements in my NextJS project. I can seem to add breakpoints correctly case all I've done never worked including what was written in the demo code for responsive breakpoints on the SwiperJS website.

I would appreciate it if someone can put me through. I just nee breakpoints for my swipers.

[JVariance]

It works with JSON.stringify().

breakpoints={
    JSON.stringify({
        768: {
            slidesPerView: 6,
            grid: {
                rows: 1,
                fill: 'row'
                }
            }
    }
)}

You could alternatively set the breakpoints attribute on the element when it's mounted.

swiperContainer?.setAttribute(
    'breakpoints',
    JSON.stringify({
        768: {
            slidesPerView: 6,
            grid: {
                rows: 1,
                fill: 'row'
                }
            }
        })
    );

[teddarcuri]

There has to be a better solution than this. Anyone had any luck? I am also configuring my breakpoints exactly as stated in the docs, but they are not working

[YousefSaeed668]

        breakpoints={{
          1024: {
            slidesPerView: 6,
          },

          768: {
            slidesPerView: 3,
          },

          0: {
            slidesPerView: 2,
          },
        }}
        i write it like this and work but once i get into the website it's broken and only appear one slide and it's a very big 

[devrahuljourney]

i have same issue with exact same code. did you find any solution for making responsive. Thank you