Vue-awesome-swiper: Pagination is not working on Swiper6

[nomunomu0504]

Vue.js version and component version

• [email protected]
• [email protected]
• [email protected]

※ 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.

[stagedivemedia]

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?

[nomunomu0504]

@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.

[stagedivemedia]

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]

@stagedivemedia
thanks. I try it :)

[stagedivemedia]

@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.

[a951055]

vue-awesome-swiper 希望尽快升级 swiper到 6.0.* 版本, 因为api变化导致功能不可用，会拦下很多新手.

[a951055]

暂时是用 vue 事件手工翻页..没办法 vue typescript 项目,只支持 6.0.* 版本的 swiper...

[tsirilson]

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.

[urbgimtam]

Actually, is not just pagination. The Zoom feature is also broken if you use swiper v6. Downgrading makes it work again.

[AndrewBogdanovTSS]

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 😐

[AndrewBogdanovTSS]

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

[smartlaksh]

Also swiper 5x doesn't render inie11. Swiper 6x seems fixing some of the issue for ie and renders is fine. But now losing navigation for all other browsers 🤯

[AndrewBogdanovTSS]

@smartlaksh use approach I've provided in here https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-666364812

[webcoderkz]

so, Swiper6 seems to be heavy bugged.. @surmon-china maybe note that in a README?

[shenxianhui]

good

[CorentinN]

import globally this way makes it work fine

https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-665051360

[a951055]

有人一起搞下 swiper6.x 的版本吗？在vue-awesome-swiper上面, 毕竟后面还会用到.

[nomunomu0504]

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 :(

[nomunomu0504]

I create PR(#760).