SwiperJS - Breakpoint Behaviour

Design help Custom code
1

I have a swiper and it’s working nicely on desktop - 3.25 slides in view, slide 1 appearing first, and navigation arrows either side:

image
image1918×711 199 KB

As soon as the page resizes - everything goes pear shaped.

The order changes, the slides per view don’t match the code, the global page padding gets ignored, and the arrows disappear.

In Designer, both the gap and arrows remain visible on small screens:

image
image833×828 66.5 KB

But when published they’re gone.

I’ve tried to keep the code minimal:

<script>
const swiper = new Swiper('.swiper', {
/*mousewheel: {invert: true,},*/
  // Optional parameters
  	direction: 'horizontal',
    loop: true,
    spaceBetween: 6,
    grabCursor: true,
    navigation: {
    nextEl: '.swiper-nav.next',
    prevEl: '.swiper-nav.prev',
    },
    breakpoints: {
    1: {
      slidesPerView: 1.25
    },
    768: {
      slidesPerView: 2.25
    },
    991: {
      slidesPerView: 3.25
    }
  }
});

</script>

I would really appreciate some help on this.

Live Preview:

Read-only:

2

Hi there,

When experiencing differences between the Designer preview and the published site with custom Swiper implementations, this usually relates to how the custom code interacts with Webflow’s native environment. To resolve this, you can:

  • Review your custom Swiper initialization code to ensure it’s properly loading after the DOM content
  • Check if your Swiper configuration matches Webflow’s slider structure
  • Consider using Webflow’s native slider functionality instead, which provides reliable behavior across both Designer and published environments
  • Inspect the browser console on the live site for any JavaScript errors that might affect the slider’s behavior

For optimal results with custom sliders, implement the code in both the Designer’s custom code settings and your site’s settings to ensure consistent behavior.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I still require help. The native slider does not work with infinite slides, despite having the option.

4

Hello all, the slide was working as expected - the problem was with my containers. My advice to anyone experiencing similar issues - view ONLY the slide container, not in any divs or sections - then slowly integrate it into your divs.