Search vue-awesome-swiper on 1. github
2. readme in mounting method, recommended @ version, using the stable version after the old plug-in name npm install VUE-Awesome-Swiper @xxx --save
3. In introducing the project main.js
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
4. Create a single file components Swiper.vue (single three-part assembly document template, script, style)
<template>
<swiper :options="swiperOption">
<!-- slides -->
//这里是轮播的内容
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>
<img src=""/>
</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls --> // two arrows, need not be deleted
<div class = "Swiper-the pagination" slot = "the pagination"> </ div>
<div class = "Button-Swiper-PREV" slot = "Button-PREV"> </ div>
<div class = "Next-Swiper-Button" slot = "Button-Next"> </ div>
// scrollbar , you need not be deleted from the
<div class = "Swiper-ScrollBar" slot = "ScrollBar"> </ div>
</ Swiper>
</ Template>
<Script>
Export default {
name: 'HomeSwiper' ,
// subassembly data must be a function of
data () {
return {
swiperOption: {}
}
},
}
</ Script>
<style lang = "Stylus" scoped >
</ style>
5. In reference to other pages, as in Home.vue
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
</div>
</template>
<script>
import HomeHeader from './component/Header'
import HomeSwiper from './component/Swiper'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper
}
}
</script>
<style lang="stylus">
</style>
6. Stabilize : In case of bad speed, the swiper is not loaded before, div below will occupy, until swiper out, div occupy the position will jump away
Approach: swiper outer nested div , let this distraction height div
<Template>
<div class = "wrapper">
<Swiper: Options = "swiperOption">
...
</ Swiper>
</ div>
</ Template>
<Script>
...
</ Script>
<style lang = " Stylus "scoped>
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25% (width aspect ratio, if written in height, and then the parent is the height of the element, not the comparison wrapper)
</ style >
7. FIG rotation following ran with a row of small dots
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
// 子组件的data必须是个函数
data() {
return {swiperOption: {
pagination:
'swiper-pagination'
}
}
},
}
</script>// three arrows that penetrate, thus breaking the limit of scoped
<style lang = "Stylus" scoped>
// this class name come from, to examine the elements obtained from the page
.wrapper>>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25% (aspect ratio, if the write height width height, and then the parent element is not the comparison wrapper)
</ style>
8.Vue is a data-driven framework, address and number of images carousel should not hard-code
Processing Method: V-cycle for item, note that the cycle to add key
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides --><swiper-slide v-for="item of swiperList" :key="item.id"> <img :src="item.imgUrl" /> </swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
swiperOption: {{return Data () {
Data subassembly must be a function of//
'the pagination-Swiper'
the pagination:
}, SwiperList: [{ID:
'0001', for imgUrl: 'HTTP: //lkadand.adoaidiajd.jada.jpg'}, {ID: '0002', for imgUrl: 'jndakm.adkand.sda.jpg' }]
}
},
}
</ Script>
<style lang = "Stylus" scoped> // three arrows that penetrate, thus breaking the limits scoped // this class name come from, to examine the elements obtained from the page
>>> .swiper-pagination-.wrapper bullet- the Active
background: Red ! Important
.wrapper
overflow: hidden
width: 100%
height: 0
padding -bottom: 31.25% (aspect ratio, if written in height, and so is the father height-level elements, not the width of the wrapper Comparative)
</ style>
9. rotation cycle
Processing Method: Add loop is true
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id"><img :src="item.imgUrl" /></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
the pagination:
swiperOption: {{return Data () {
Data subassembly must be a function of//
'the pagination-Swiper' ,
Loop: to true
},
swiperList: [{ID: '0001', for imgUrl: 'HTTP: //lkadand.adoaidiajd.jada.jpg'}, {ID: '0002', for imgUrl: 'jndakm. adkand.sda.jpg ' }]
}
},
}
</ Script>
<style lang = "Stylus" scoped> // three arrows are penetrated, so that break through the limitation of scoped // the class name comes from , from page to review the elements resulting
.wrapper >>> .swiper-pagination-bullet- the Active
background: Red ! Important
.wrapper
overflow: hidden
width: 100%
height:0
padding
-bottom: 31.25% (width aspect ratio, if written in height, and then the parent is the height of the element, not the comparison wrapper)
</ style>