0

How to change pagination parameters dynamically?

For example enable/disable dynamicBullets on button click.

I'm trying to change the value through: mySwiper.params.pagination.dynamicBullets = ....

And then I do: mySwiper.update(); mySwiper.pagination.update()

but it doesn't work.

Here is a small demo: https://codepen.io/abvas/pen/VwxYWae

    var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: false
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

let btn = document.getElementById('btn');

btn.addEventListener("click", () => {
    let state = mySwiper.params.pagination.dynamicBullets;
    mySwiper.params.pagination.dynamicBullets = !state;
    mySwiper.pagination.update()
    mySwiper.update();
    console.log(mySwiper.params.pagination.dynamicBullets)
})

press the "ON/OFF" button at the top.

Please tell me what am I doing wrong.

Thank you.

abvas
  • 1
  • Not sure this is possible (The dynamic bullet do a some on fly calculations). swiper.pagination.update() - not update the pagination type (But the state: enabled/disabled/active). – Ezra Siton Sep 05 '22 at 22:10

1 Answers1

0

You can try to destroy swiper and init it with different params.

https://jsfiddle.net/oh6k742f/2/

let swiper;
const params = {
  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true
  },
};
function initSwiper(params) {
    swiper = new Swiper(".mySwiper", params);
}     

initSwiper(params);

document.querySelector('button').addEventListener('click', () => {
    swiper.destroy();
  params.pagination.dynamicBullets = !params.pagination.dynamicBullets;
  initSwiper(params);
});
Taras
  • 1,017
  • 2
  • 13
  • Hello! Thanks for the answer. But I also tried to do this before. DynamicBullets: false does not display bullets for all slides. In your example, bullets for 5 slides are displayed, and the rest are not displayed. – abvas Sep 07 '22 at 08:10