用vue-awsome-swiper做vue的轮播步骤

1、首先进入百度打开vue-awsome-swiper-npm
2、在小黑窗中敲 npm install vue-awesome-swiper --save
3、将以下代码引入到文件夹中的main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper）

4、在vue-awsome-swiper-npm首页中找到SPA模块，复制template标签里面的 swiper标签中的所有东西，粘贴到你想要轮播的那个页面（组件）中。将不需要的东西删掉。

<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- 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>

5、然后在下面script中的export default里，只拿 data里的东西（如下所示：）

     data() {
          return {
            swiperOption: {
              		loop:true,
              		autoplay:{
              			delay:1000  //一秒切换一次
              		}，
              		pagination: {
					    el: '.swiper-pagination',
					}
            }
          }
}

6、如果你想循环播放图片的话，就在上面代码块中加入 loop:true
设置轮播的时间是加入：

autoplay:{
    delay:1000  //一秒切换一次
}

7、想要实现轮播图中的小圆圈（分页器），加入：

pagination: {
    el: '.swiper-pagination',
  }

（温馨提示：想要实现更多的样式去 Swiper4 页面上查找更多精彩内容！）

用vue-awsome-swiper做vue的轮播步骤

猜你喜欢