vue中使用轮播图 Vue-Awesome-Swiper

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，这个就是swiper，不过弄了一个适合vue的东西;官方这样描述：基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。如果需要回退到 Swiper3，请使用 v2.6.7 版本。如何使用呢？第一步肯定要下载啊：npm install vue-awesome-swiper --s

cvper

3882人浏览 · 2018-05-05 04:15:13

cvper · 2018-05-05 04:15:13 发布

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，

这个就是swiper，不过弄了一个适合vue的东西;

官方这样描述：

基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 v2.6.7 版本。

如何使用呢？

第一步肯定要下载啊：

npm install vue-awesome-swiper --save

下载完之后这样引用一下：

   < 
  script> 
 
  import 
  "swiper/dist/css/swiper.css"; 
 
  import { swiper, swiperSlide } 
  from 
  "vue-awesome-swiper"; 
 
  export 
  default { 
 
   name: 
  "Carousel", 
 
   } 
 
   </ 
  script>

引用完之后就可以用了

   < 
  script> 
 
  import 
  "swiper/dist/css/swiper.css"; 
 
  import { swiper, swiperSlide } 
  from 
  "vue-awesome-swiper"; 
 
  import carousel1 
  from 
  "../assets/img/carousel1.jpg"; 
 
  import carousel2 
  from 
  "../assets/img/carousel2.jpg"; 
 
  import carousel3 
  from 
  "../assets/img/carousel3.jpg"; 
 
  import carousel4 
  from 
  "../assets/img/carousel4.jpg"; 
 
  import carousel5 
  from 
  "../assets/img/carousel5.jpg"; 
 
  import carousel6 
  from 
  "../assets/img/carousel6.jpg"; 
 
  export 
  default { 
 
   name: 
  "Carousel", 
 
  data() { 
 
  return { 
 
   slides:[carousel1,carousel2,carousel3,carousel4,carousel5,carousel6], 
 
   swiperOption: { 
 
  //可选选项，自动滑动 
 
   autoplay: 
  true, 
 
  // 循环滚动 
 
   loop : 
  true, 
 
  //轮播图分页 
 
   pagination: { 
 
   el: 
  '.swiper-pagination', 
 
   clickable: 
  true, 
 
   }, 
 
   } 
 
   }; 
 
   }, 
 
   computed: { 
 
  swiper() { 
 
  return 
  this.$refs.mySwiper.swiper; 
 
   } 
 
   }, 
 
  mounted() { 
 
  // current swiper instance 
 
  // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 
 
  console. 
  log( 
  "this is current swiper instance object", 
  this.swiper); 
 
  // this.swiper.slideTo(4, 4000, false); 
 
   }, 
 
   components: { 
 
   swiper, 
 
   swiperSlide 
 
   } 
 
   }; 
 
   </ 
  script>

主要参数都在data 里面的 swiperOption 中设置，和以前使用swiper一样，没什么差别，

主要区别是在下面的处理上；

上面的加上图片就已经可以简单使用了；

官方说明：https://www.npmjs.com/package/vue-awesome-swiper

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^