Vue-awesome-swiper: The disappearance of swiper Pagination component

Created on 25 Dec 2017  ·  2Comments  ·  Source: surmon-china/vue-awesome-swiper

<template>
  <md-card>
    <md-card-actions>
      <div class="md-subhead">
        <span>Default Setup</span>
        <span>(</span>
        <span>默认设置</span>
        <span>)</span>
      </div>
      <md-button class="md-icon-button"
                 target="_blank"
                 href="https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/01-default.vue">
        <md-icon>code</md-icon>
      </md-button>
    </md-card-actions>
    <md-card-media>
      <!-- swiper -->
      <swiper>
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </md-card-media>
  </md-card>
</template>

<script>
  export default {
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }
</script>

npm

Vue.js version and component version

"vue": "^2.5.13",
"vue-awesome-swiper": "^3.0.6",

What is Expected?

Pegination Component

What is actually happening?

All I need is the pagination, but it never showed up.
Still trying to think about where is the bug, by the way, there is no error about this component, which is confusing.

All 2 comments

@dampion

You need to confirm three parts:

  1. /node_modules/swiper/package.json => version >= 4.0.0

  2. Review the element to see if <div class="swiper-pagination"></div> is being rendered

  3. Entrance or component at the introduction of css, import 'swiper/dist/css/swiper.css'

问题暂时关闭,有复现可再次打开。

Was this page helpful?
0 / 5 - 0 ratings