1. 安装 swiper
NPM install [email protected].4.1 --save-dev
2. 在组件中引用 swiper
- import Swiper from 'swiper';
- import 'swiper/dist/CSS/swiper.min.css';
3. 实例
- <template>
- <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
- <div class="slideshow">
- <transition-group tag="ul" name="image">
- <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
- <a href="#">
- <img :src='img'>
- </a>
- </li>
- </transition-group>
- </div>
- <div class="bar">
- <span v-for="(item, index) in imgArray" :class="{'active':index===mark }"
- @click="change(index)" :key="index"></span>
- </div>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- timer: null, // 定时器
- mark: 0, // 比对图片索引的变量
- imgArray: [// 图片路径
- require('../../assets/images/index/banner1.png'),
- require('../../assets/images/index/banner1.png'),
- require('../../assets/images/index/banner1.png'),
- require('../../assets/images/index/banner1.png')
- ]
- }
- },
- methods: {
- autoPlay () {
- this.mark++;
- if (this.mark === 4) {
- this.mark = 0
- }
- },
- play () {
- this.timer = setInterval(this.autoPlay, 2500)
- },
- change (i) {
- this.mark = i
- },
- stop () {
- clearInterval(this.timer)
- },
- move () {
- this.timer = setInterval(this.autoPlay, 2500)
- }
- },
- created () {
- this.play()
- }
- }
- </script>
- <style scoped>
- * {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .slide {
- width: 100%;
- height: 320px;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- }
- .slideshow {
- width: 100%;
- height: 320px;
- }
- .slideshow ul{
- width:100%;
- height: 320px;
- }
- li {
- width:100%;
- position: absolute;
- }
- .slideshow ul a{
- display: inline-block;
- width:100%;
- }
- img {
- width: 100%;
- height: 320px;
- }
- .bar {
- position: absolute;
- width: 100%;
- bottom: 10px;
- margin: 0 auto;
- z-index: 10;
- text-align: center;
- }
- .bar span {
- width: 10px;
- height: 10px;
- border-radius:50%;
- background: white;
- display: inline-block;
- margin-right: 10px;
- }
- .active {
- background: red !important;
- }
- .image-enter-active {
- transform: translateX(0);
- transition: all 1.5s ease;
- }
- .image-leave-active {
- transform: translateX(-100%);
- transition: all 1.5s ease;
- }
- .image-enter {
- transform: translateX(100%);
- }
- .image-leave {
- transform: translateX(0);
- }
- </style>
来源: http://www.bubuko.com/infodetail-3113800.html