<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": "^2.5.13",
"vue-awesome-swiper": "^3.0.6",
Pegination Component
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.
@dampion
You need to confirm three parts:
/node_modules/swiper/package.json => version >= 4.0.0
Review the element to see if <div class="swiper-pagination"></div> is being rendered
Entrance or component at the introduction of css, import 'swiper/dist/css/swiper.css'
问题暂时关闭,有复现可再次打开。