Swiper slides/style breaking on Vue update

Hi, Im using new V3 with vue/webpack template.

Im just making a simple slider with 3 slides per view and each has background image. I added a @click event inside to do an operation when user clicks a particular slide. Once I update VUE data and the UI is updated, my slider converts to 1 slide per view with no spacing in between each slide. Its definitely strange behavior that I cant seem to find any documentation on. All my slides are pre-defined and I do not update anything in the slider after my initial Init. Any help would be appreciated.

Here is my ready function

this.$f7ready((f7) => {
    var self=this;

    var swiper=f7.swiper.create('.swiper-container',{
      spaceBetween: 30,
      slidesPerView: 2,
      speed: 400,
      breakpoints: {
        320:{
          slidesPerView: 2,
          spaceBetween: 10
        },
        480: {
          slidesPerView: 3,
          spaceBetween: 20
        },
        640: {
          slidesPerView: 4,
          spaceBetween: 30
        }

      },
      preventClicks: false,
      observer: true,
      grabCursor: true
      //preloadImages: false,
      // lazy: true
    });

What is your template?

<f7-block>
<f7-swiper class="category-swiper">
<a class="swiper-slide" href="#" 
style="background: linear-gradient(rgba(255,0,0,0.45),rgba(255,0,0,0.45)),url('https://xxx,blob.core.windows.net/venues/barpool_67239660_large-w600.jpg')" @click="applyFilter('1')">Event 1</a>
<a class="swiper-slide" style="background: linear-gradient(rgba(0,51,102,0.45),rgba(0,51,102,0.45)),url('https://xxx.blob.core.windows.net/venues/barpool_67239660_large-w600.jpg')" @click="applyFilter('2')">Event 2</a>
<a class="swiper-slide" style="background: linear-gradient(rgba(51,53,102,0.45),rgba(51,153,102,0.45)),url('https://xxx.blob.core.windows.net/venues/barpool_67239660_large-w600.jpg')" @click="applyFilter('3')">Event 3</a>
<a class="swiper-slide" href="#" style="background: linear-gradient(rgba(204,0,102,0.45),rgba(204,0,102,0.45)),url('https://xxx.blob.core.windows.net/venues/barpool_67239660_large-w600.jpg')" @click="applyFilter('4')">Event 4</a>
<a class="swiper-slide" href="#" style="background: linear-gradient(rgba(204,102,0,0.45),rgba(204,102,0,0.45)),url('https://xxx.blob.core.windows.net/venues/barpool_67239660_large-w600.jpg')" @click="applyFilter('5')">Event 5</a>
</f7-swiper>
</f7-block>

will already create initialized Swiper, so you don’t need to do :

var swiper=f7.swiper.create('.swiper-container',{`
...

If you need manual init, then disable auto init by passing :init="false":

<f7-swiper :init="false">...
2 Likes

this worked…thanks a lot.