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
});
<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>
mdorson:
<f7-swiper
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.