After applying brake point The slideshow works weird.

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<width when switching 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):

• 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.

[nolimits4web]

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

No, it is not supported

[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.