前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-awesome-swiper实现轮播图片

vue-awesome-swiper实现轮播图片

作者头像
ccf19881030
发布2020-03-03 10:43:35
5.2K0
发布2020-03-03 10:43:35
举报
文章被收录于专栏:ccf19881030的博客

前言

最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipper)时,学习了vue-awesome-swiper这个库的使用,其npm官网地址是:https://www.npmjs.com/package/vue-awesome-swiper,对应的github项目地址是:https://github.com/surmon-china/vue-awesome-swiper 其官网介绍如下所示:

vue-awesome-swiper
vue-awesome-swiper

Swiper的相关简介

Swiper中文网地址为:https://www.swiper.com.cn。 Swiper目前已经更新到版本5了,Swiper常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等。其官网对于Swipper5的介绍如下:

pic1
pic1
pic2
pic2
pic3
pic3

vue-awesome-swiper的使用

我使用的操作系统是Windows10,使用的开发IDE是Visual Studio Code,参考npmjs-vue-awesome-swiper上面的使用说明,其使用起来很简单,在学习全栈之巅的王者荣耀项目的3.7-首页顶部轮播图片(vue-swipper)时,学习如何使用vue-awesome-swiper加载轮播图片。

使用步骤

1、npm安装vue-awesome-swiper
代码语言:javascript
复制
npm install vue-awesome-swiper --save

2、Mount

mount with global

代码语言:javascript
复制
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

根据官网文档描述,即全局导入,我在做这个项目时,是在main.js中引入该组件的,对应的main.js文件内容如下所示:

代码语言:javascript
复制
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import './style.scss'
import router from './router'

// 使用vue-awesome-swiper轮播组件  https://github.com/surmon-china/vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3、在需要使用轮播效果的Vue页面中使用swiper组件,如下所示:

代码语言:javascript
复制
<!-- The ref attr used to find the swiper instance -->
<template>
  <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>
</template>
 
<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    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(3, 1000, false)
    }
  }
</script>

我在做项目时,是在Home.vue中使用该组件的,加了3中图片链接用于实现轮播效果,具体的Home.vue代码如下:

代码语言:javascript
复制
<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/8def83c86d3df7e177faa78bf322bf65.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/01378523eb7c4e073a18acd56f0f1777.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/e38db707a96d8458101c78ecf644e467.jpeg">
      </swiper-slide>
    
      <div class="swiper-pagination" slot="pagination">
      </div>
    </swiper>
  </div>
</template>

<script>

export default {
    data() {
      return {
        swiperOption: {
          autoplay: { delay: 3000},   // 每隔3秒钟轮播另外一张图片
          pagination: {
              el: '.swiper-pagination'
          }
      }
    }
  }
  }
</script>

<style>

</style>

我在项目中暂时只放了3张用于轮播的图片,每隔3秒钟轮播另外一张图片,当在浏览器中左右滑动鼠标或者在手机端左右滑动时会看到不同的图片,起来轮播的效果 最终的轮播效果图如下所示: 图片1:

pic444
pic444

图片2:

pic555
pic555

图片3:

pic666
pic666

关于全栈之巅王者荣耀的项目可以从github上面下载,其下载地址为:https://github.com/topfullstack/node-vue-moba

参考资料

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/02/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • Swiper的相关简介
    • vue-awesome-swiper的使用
      • 使用步骤
        • 1、npm安装vue-awesome-swiper
      • 2、Mount
        • 3、在需要使用轮播效果的Vue页面中使用swiper组件,如下所示:
        • 参考资料
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档