Swiper: V6.1.1 init with pagination, pagination DOM is empty

[believeZJP]

This is a (multiple allowed):

• [x] bug

• Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.

V6.1.1

• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.

macOS, CHROME

• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

https://codepen.io/believezjp/pen/xxVOboe

What you did

EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.

new Swiper('.swiper-container', {
        // need pagination
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets'
       }
})

use Swiper in a vue.js project, init with pagination, check DOM <div class="swiper-pagination"></div> there is no bullets in pagination DOM.

Expected Behavior

EXPLAIN WHAT IS TO BE EXPECTED, HERE.

show pagination bullets DOM in <div class="swiper-pagination"></div>

Actual Behavior

EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

[simonmaass]

i am having the same problem...!! tried to go back to v5.4.5 and it works again... seems to be broken since v6.0.0

this is my setup

HTML:

<div v-swiper="swiperSetting">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(proof, index) in content.items" :key="index">
Test
          </div>
          <div class="swiper-pagination" />
        </div>
      </div>

SCRIPT
import { directive } from 'vue-awesome-swiper'

directives: {
    swiper: directive
  },

and Settings:

swiperSetting: {
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        },
        spaceBetween: 50,
        slidesPerView: 2,
        passiveListeners: true,
        grabCursor: true,
        watchOverflow: true
      }

[simonmaass]

I think this issue is related to vue-awesome-swiper....

[believeZJP]

I think this issue is related to vue-awesome-swiper....

No, You can try with import Swiper from 'swiper' in your project, it's the same problem. It's not not caused by vue-awesome-swiper.

[aKzenT]

I'm having the same problem, but after updating from 5.3.6 to 5.4.5. Pagination bullets are no longer shown

[nolimits4web]

You can clearly see it is working correct here https://stackblitz.com/edit/swiper-demo-3-pagination-dhkdwx?file=index.html

[aKzenT]

There are quite a few bugs that have been closed that refer to pagination bullets missing, so even though the demo is working I think there might still be something weird going on in some configurations. In my case, I could work arround the problem by not passing in a selector but the HTMLElement directly. Maybe this is helpful for anyone facing similar issues.

[GitOfZGT]

我遇到了同样的问题，但是从5.3.6更新到5.4.5之后。分页符号不再显示

I known why!

[GitOfZGT]

I known why!

but import Swiper from "swiper/swiper-bundle.esm.js" is ok!

[simonmaass]

@nolimits4web can this be reopened?

[dan2k3k4]

Also getting the same issue but did the change suggested by @GitOfZGT and worked fine:

-import Swiper from 'swiper'
+import Swiper from 'swiper/swiper-bundle.esm'