Component Slider Pagination Bullets overflowing in Mobile

Finsweet Components Slider
1

Description

Using the component slider with a large number of CMS items is causing too many bullets on the pagination and overflowing on mobile. I’ve tried to change the size of the bullets with no change.

Site URL

Required: Please provide a staging/production URL where we can see the issue

IMG_3886
IMG_38861206×2622 180 KB

2

Hey @webadminif

Too many CMS items are generating one bullet per slide, and they overflow the slider’s pagination row on mobile. Resizing the bullets in Webflow’s Designer won’t help since the total count is still too wide to fit.

We need to show only a fixed number of bullets at a time (e.g., 7), always keeping the active one visible.

Add this as a Custom Code embed before the </body> tag

<script>
  (function () {
    var MAX_DOTS = 7; // adjust as needed

    function trimDots() {
      document.querySelectorAll('.w-slider-nav').forEach(function (nav) {
        var dots = Array.from(nav.querySelectorAll('.w-slider-dot'));
        if (dots.length <= MAX_DOTS) return;

        var activeIdx = dots.findIndex(function (d) {
          return d.classList.contains('w-active');
        });
        if (activeIdx < 0) activeIdx = 0;

        var half  = Math.floor(MAX_DOTS / 2);
        var start = Math.min(Math.max(activeIdx - half, 0), dots.length - MAX_DOTS);
        var end   = start + MAX_DOTS;

        dots.forEach(function (dot, i) {
          dot.style.display = (i >= start && i < end) ? '' : 'none';
        });
      });
    }

    function init() {
      trimDots();
      document.querySelectorAll('.w-slider-nav').forEach(function (nav) {
        new MutationObserver(trimDots).observe(nav, {
          subtree: true,
          attributes: true,
          attributeFilter: ['class']
        });
      });
    }
 function init() {
      trimDots();
      document.querySelectorAll('.w-slider-nav').forEach(function (nav) {
        new MutationObserver(trimDots).observe(nav, {
          subtree: true,
          attributes: true,
          attributeFilter: ['class']
        });
      });
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init();
    }
  })();
  </script>

How it works:

  • Watches the w-slider-nav for class changes (Webflow adds w-active to the current dot on every slide change)
  • Hides all dots outside a window of MAX_DOTS centered on the active one
  • Runs instantly on load, no flicker

Optionally, add this CSS to prevent any edge-case overflow while the script initializes:

.w-slider-nav {
    overflow: hidden;
    flex-wrap: nowrap;
  }

You can tune MAX_DOTS to 5 for a tighter look on very narrow screens, or use a media query breakpoint variant if you want different counts on desktop vs. mobile.