Pagination is not working on Swiper6

[nomunomu0504]

Vue.js version and component version

• vue@2.6.11
• swiper@6.0.2
• vue-awesome-swiper@4.1.1

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

[studio65digital]

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.

[studio65digital]

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

[studio65digital]

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

[halo951]

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

[halo951]

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

[tsirilson]

Thank god for this thread. Happens to me too in swiper@6.0.4 (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 #680
I guess we should narrow it down to 1 issue

[laksmaria]

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 🤯

[AndrewBogdanovTSS]

@smartlaksh use approach I've provided in here #680 (comment)

[avxkim]

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

#680 (comment)

[halo951]

有人一起搞下 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).

[matamune94]

how can fix ?

[nomunomu0504]

@matamune94

please read README.md of it :)
https://github.com/nomunomu0504/vue-awesome-swiper/tree/fix/update-readme-for-swiper6.x

[baermathias]

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>

[Faqih15]

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.