vue-awesome-swiper
vue-awesome-swiper copied to clipboard
surmon-china
Pagination is not working on Swiper6
Vue.js version and component version
※ These from yarn of version is 1.22.4
Reproduction Link
I can't worked sample code of pagination.
This is my code:
<template>
<div class="posts">
<div class="post" v-for="(user, key) in userList" :key="key">
...
<div class="post__image">
<swiper :options="swiperOptions" ref="mySwiper">
<swiper-slide v-for="(content_image, key) in user.content_images" :key="key">
<img :src="content_image.image.url" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination" />
</swiper>
</div>
...
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
export default Vue.extend({
components: {
Swiper,
SwiperSlide,
},
directives: {
swiper: directive,
},
props: {
userList: {
type: Array,
required: true,
},
},
data: function () {
return {
swiperOptions: {
loop: false,
slidesPerView: 1,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
},
};
},
});
</script>
What am I doing wrong? please teach me.
Having the same issue. It seems to be somehow connected to the 6.0.2 version of swiper as I didn't have any problems in version 5. The frontend just renders an empty div, right?
@stagedivemedia right. It just renders an empty div. but i tried only latest version. Is version 5 is worked correctly?, might want to use version 5 instead of latest.
Yes. I have a Project running with swiper 5.3.7 where the pagination works fine. (vue-awesome-swiper version there is 4.1.0)
@nomunomu0504 I just downgraded swiper to 5.4.5 and everything works fine. There also is an issue with the navigation in 6.0.1 as it doesn't really register clicks consistently. But as mention in 5.4.5 everything works.
Thank god for this thread. Happens to me too in [email protected] (latest version as of writing this comment). Downgrading to previous major version works fine.
Actually, is not just pagination. The Zoom feature is also broken if you use swiper v6. Downgrading makes it work again.
But what exactly is causing it? Is it something inside swiper.js code or vue-awesome-swiper is just not supporting version 6 yet? If it's the second when will it be updated? There are a lot of new improvements and updates in v.6, I wouldn't want to be stuck on v.5 😐
Also, this issue is a duplicate of https://github.com/surmon-china/vue-awesome-swiper/issues/680 I guess we should narrow it down to 1 issue
Also swiper 5x doesn't render in ie11. Swiper 6x seems fixing some of the issue for ie and renders is fine. But now losing navigation for all other browsers 🤯
@smartlaksh use approach I've provided in here https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-666364812
so, Swiper6 seems to be heavy bugged.. @surmon-china maybe note that in a README?
import globally this way makes it work fine
https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-665051360
found new information. trying under the version.
"swiper": "^6.4.5",
"vue-awesome-swiper": "^4.1.1",
yarn dev is not working pagination but yarn run serve is working.
what is difference between these command :(
@matamune94
please read README.md of it :) https://github.com/nomunomu0504/vue-awesome-swiper/tree/fix/update-readme-for-swiper6.x
Don't use vue-awesome-swiper, its broken and the repo is not maintained. Use the official swiper, it supports Vue 3 officialy: https://swiperjs.com/vue
But you can also use the core of it with Vue 2. Here is an example:
tamplate part:
<template>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"
v-for="(slide, index) in slides"
:key="index"
>
<!-- I am using Vuetify v-avatar and v-img here, but you don't need it -->
<v-avatar
tile="tile"
size="15vw"
class="mt-8"
>
<v-img :src="`${baseUrl}${slide.url}`"></v-img>
</v-avatar>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</template>
script part:
<script>
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';
// core version + navigation, pagination modules:
import SwiperCore, { Navigation, Pagination } from 'swiper/core';
// configure Swiper to use modules
SwiperCore.use([Navigation, Pagination]);
export default {
name: "Carousel",
props: ['slides'],
data(){
return {
baseUrl: process.env.VUE_APP_API_BASE_URL,
}
},
mounted() {
// init Swiper:
/* eslint-disable no-unused-vars */
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: false,
slidesPerView: 3,
spaceBetween: 50,
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: "bullets",
clickable: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
}
};
</script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
hello, i have same issue, swiper pagination not working on run build, but its still working in localhost npm run dev, i use nextjs with swiper js.
