Swiper: After applying brake point The slideshow works weird.

[awt0523]

I'm working in the next ssr environment.

I absolutely need this
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
When width is over 769
[pagination tpye: fraction],
When it is less than 768
I applied [tpye: bullets]
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
When changing options due to breakpoints

• Cannot slide by touch
• 768 When sliding, the fraction page number is fixed and looping is possible only with the prev button.

There is nothing similar on Stack Overflow.

I tested it with react, but the same problem occurred
please check.

This is a (multiple allowed):

• [x] bug

• Swiper Version: 6.1.2
• Platform/Target and Browser Versions: macOS, Chrome

What you did

  <Swiper
    slidesPerView={1}
    loop
    navigation
    pagination={{
      type: "bullets",
      renderBullet: (index, className) => {
        return `<div class="${className}">${index}</div>`;
      },
      clickable: true,
    }}
    breakpoints={{
      769: {
        slidesPerView: 3,
        slidesPerGroup: 3,
        pagination: { type: "fraction", clickable: true },
      },
    }}
  >

Expected Behavior

When width is over 769
pagination type: fraction, slidesPerView: 3, slidesPerGroup: 3,

When it is less than 768
pagination type: bullets, slidesPerView:3

Actual Behavior

The view renders normally.

The function malfunctions when changing the option to a breakpoint.

Does not slide with touch and drag.

When changing the 768->769 width value, the loop and slide move only when the previous button is pressed.

[vincentleeuwen]

+1, breakpoints seem to be breaking the loop functionality (react + next). slideshow only loops when you're going backward and makes some sort of jump (4 at a time on desktop or so). Any ideas?

<Swiper
  slidesPerView={2}
  spaceBetween={20}
  breakpoints={{
    768: {
      slidesPerView: 4,
    },
    1024: {
      slidesPerView: 6,
    },
  }}
  navigation
  loop
>

[awt0523]

@vincentleeuwen
Thanks for reading my article and giving me ideas.
Have you tested yourself with the code you wrote?
I've tried following your opinion, but the same problem arises...

I have tried to follow your opinion but I have the same problem.
And I must slidesPerView :3 when width>769 or higher and
pagination type: fraction,
If less than 768
pagination type:bullets must contain

[nolimits4web]

Breakpoints can't work with Pagination type and behavior

breakpoints

Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which are not required different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn.

[awt0523]

Breakpoints can't work with Pagination type and behavior
@nolimits4web
Then, is it not possible to change the pagination type according to the width value?

[nolimits4web]

Then, is it not possible to change the pagination type according to the width value?

No, it is not supported

[awt0523]

Then, is it not possible to change the pagination type according to the width value?

No, it is not supported

@nolimits4web

Lastly, I'll ask you one more thing.
` className="stay_list"
slidesPerView={1}
breakpoints={{
769: {
slidesPerGroup: 3,
slidesPerView: 3,
},
}}
loop
navigation
pagination={{ type: "fraction", clickable: true }}

`
Even if you do this, slides Show can loop only with the prev button because of the same problem.

Is this also not supported? Or should I post the issue again?

[nolimits4web]

Is this also not supported? Or should I post the issue again?

Better new issue with live JSFiddle/CodePen/StackBlitz/Code Sandbox example :)

[awt0523]

Is this also not supported? Or should I post the issue again?

Better new issue with live JSFiddle/CodePen/StackBlitz/Code Sandbox example :)

Okay, thanks for your kind answer