Swiper doesnt update

[ouraios]

Hi,

When i increase the number of slidesPerView the Swiper component doesnt update the number of slides displayed per view even if i call the update method on the component.

How can i do to force the swiper component to render with the updated options ?

[dimonx3]

I also can not understand how to change params after init. You can try change some params directly in swiper instance. But not all params works. this.swiper.params.slidesPerView = 3; See Async data example. I'm not sure if this is the right way. You can also try call destroy() and init().

[surmon-china]

swiper.update()

[MichalKrakow]

doesnt work with lazy loading...

[ouraios]

As i said @surmon-china it doesnt work even after calling the update method :/

[donng]

Do anybody know how to update swiper after I change swiper options?

[jgribonvald]

I have nearly a same problem. When using vue-cli to serve the app I don't get any problem, but when deploying to a builded component the update doesn't work anymore and also any actions (next, prev, etc...) are working I need to make actions manually. I'm using it in web-components !

[mrGrochowski]

doesnt work with lazy loading...

have the same issue

[Mark910413]

I got the same issue. Have you solved it? @jgribonvald

[jgribonvald]

I got the same issue. Have you solved it? @jgribonvald

I manage all actions manually but I call component functions...

[Mark910413]

I got the same issue. Have you solved it? @jgribonvald

I manage all actions manually but I call component functions...

That is to say, you haven't solved it yet？

[kurumbus]

Hey guys, same question here.

There's of course a hack with hanging v-if="showSlider " on the slider and then watching for changing in swiper options.

            swiperOptionsActive() {
                this.showSlider = false;
                this.$nextTick(() => {
                    this.showSlider = true
                });
            },

But it's a bad way.

[Rhogar]

worked for me:

this.$refs[your swiper component ref ].swiper.destroy() this.$nextTick(() => { this.$refs[your swiper component ref].mountInstance() this.$refs[your swiper component ref].swiper.update() })

[timmi-on-rails]

Changing the parameters/options of a swiper after initialization does not seem to be a supported scenario. Looking at https://swiperjs.com/api/, there are only very few functions like mySwiper.changeDirection(direction) that allow updating certain options after initialization. Therefore I would not recommend manipulating the mySwiper.params directly.

I found a solution to the problem here: https://michaelnthiessen.com/force-re-render/. My problem is similar. I have to recreate the swiper when changing the loop option. This can be achieved like so:

<swiper :key="swiperOptions.loop" :options="swiperOptions">

This works, because vue will automatically recreate the component, if the key changes. I guess if you want to change multiple options you would have to come up with a different key.

There are two things the library authors should consider imo:

1. https://swiperjs.com/api/ should make the mySwiper.params object a copy of the initial options (at the point of initialization), if it is not meant to be changed after initialization. This would avoid people implementing hacks that work with some of those options for now, but may not in the future.
2. vue-awesome-swiper could try to find a way to show that options cannot change after creation of the component, so people won't try binding them and expect it to work. Don't know if that is possible somehow in vue?

[katerlouis]

slidesPerView is a setting the swiper docs claim to be changeable by using breakpoints: {} And manuall doing mySwiper.params.slidesPerView = 3 followed by mySwiper.update() makes the slides widths recalculate.

In the following example, calling the Vue method updateManually() makes swiper react and display 3 slides per view, as expected.

But changing awesomeState doesn't make swiper react, although the <Swiper>-component shows the correct options object in devtools. I was disappointed vue-awesome-swiper doesn't watch for changes on the :options-prop and thought I could still update with this.$refs.mySwiper.swiperInstance.update() – But nothing changed :/

It looks like the :options-prop doens't get passed to this.$refs.mySwiper.swiperInstance.params again after initialization.

<Swiper ref="mySwiper" :options="swiperOptions">
  <SwiperSlide>Some slide content...</SwiperSlide>
  <SwiperSlide>Some more...</SwiperSlide>
  <SwiperSlide>Okay, now it's enuff...</SwiperSlide>
</Swiper>

data() {
  return {
    awesomeState: 2,
  };
},

computed: {
  swiperOptions() {
    loop: true,

    pagination: {
      el: '.my-pagination',
      clickable: true,
    },
    
    slidesPerView: this.awesomeState;
  },
},

methods: {
  updateManually() {
    this.$refs.mySwiper.swiperInstance.params.slidesPerView = this.awesomeState;
    this.$refs.mySwiper.swiperInstance.update();
  },
},

[guda-art]

<swiper :key="slidesPerView"> add key maybe work, but not the most good fun i think, remember reget swiper dom

[rajeevverma076]

I'm facing challenges working with the Swiper plugin while converting vue component to a web component using vue cli. vue-cli-service build --target wc --inline-vue --name hello-world src/*.vue In development working fine but when I'm converting it into a web component it automatically loses CSS and javascript functionality. Only CSS classes are coming in components but non of the CSS loaded. also prev and next buttons not working. If anyone having some issues just let me know. "vue-awesome-swiper": "4.1.1", "swiper": "5.4.5",