Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pagination from default to dynamic is not refreshing correctly on breakpoint

See original GitHub issue

This is a:

bug
Swiper Version: 4.5.0
Platform/Target and Browser Versions: All
Code:

var swiper_settings = {
  slidesPerView: 4,
  slidesPerGroup: 4,
  spaceBetween: 40,
  loop: false,
  speed: 500,
  simulateTouch: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
  breakpoints: {
    540: {
      slidesPerView: 1,
      slidesPerGroup: 1,
      spaceBetween: 30,
      pagination: {
        dynamicBullets: true,
        dynamicMainBullets: 8,
        clickable: false,
      }
    },

    640: {
      slidesPerView: 2,
      slidesPerGroup: 2,
      spaceBetween: 30,
      pagination: {
        dynamicBullets: true,
        dynamicMainBullets: 8,
      }
    },

    768: {
      slidesPerView: 2,
      slidesPerGroup: 2,
      spaceBetween: 40,
      pagination: {
        dynamicBullets: false,
      }
    },

    900: {
      slidesPerView: 3,
      slidesPerGroup: 3,
      spaceBetween: 30,
      pagination: {
        dynamicBullets: false,
      }
    },

    1024: {
      slidesPerView: 3,
      slidesPerGroup: 3,
      spaceBetween: 40,
      pagination: {
        dynamicBullets: false,
      }
    },

    1280: {
      slidesPerView: 4,
      slidesPerGroup: 4,
      spaceBetween: 30,
      pagination: {
        dynamicBullets: false,
      }
    }

  }
}

var mySwiper = new Swiper('.swiper-container', swiper_settings);

What you did

I’ve tried various functions available like mySwiper.destroy(), then setting a new instance, mySwiper.update, both on resize/orientation change event, but neither of these are working.

Expected Behavior

When you hit breakpoints 540 or 640 on window resize (on mobile devices orientation changes also) the pagination should “refresh”, then get correct positioning, style and number of bullets should apply from default pagination to dynamic and vice versa.

Actual Behavior

Pagination is keeping the settings/styles from previous breakpoint and aren’t dynamic and same situation if you resize from small to bigger. Pagination is correct when you refresh browser, but that is not correct behavior.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:5

Top GitHub Comments

1reaction

smartfox87commented, Jul 25, 2020

I found a solution

breakpoints: { 320: { slidesPerView: 1, slidesPerGroup: 1, pagination: { dynamicBullets: true, dynamicMainBullets: 7, }, }, 430: { slidesPerView: 2, slidesPerGroup: 2, pagination: { dynamicBullets: false, }, }, }, on: { breakpoint: function (swiper) { if (swiper.params.pagination.dynamicBullets) { swiper.pagination.init() } else { setTimeout(function () { swiper.pagination.el.style.width = ‘100%’ swiper.pagination.el.classList.remove(‘swiper-pagination-bullets-dynamic’) }) } }, }

0reactions

smartfox87commented, Jul 25, 2020

there is a solution problemy? I’m seeing the same issue.