专栏首页ccf19881030的博客vue-awesome-swiper实现轮播图片

vue-awesome-swiper实现轮播图片

前言

最近在学习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 其官网介绍如下所示:

Swiper的相关简介

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

vue-awesome-swiper的使用

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

使用步骤

1、npm安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2、Mount

mount with global

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文件内容如下所示:

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组件,如下所示:

<!-- 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代码如下:

<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:

图片2:

图片3:

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

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VS2017中使用CppSQLite报出编译器错误C2440

    最近在VS2017中使用CodeProject上面的CppSqlite这个Sqlite的C++封装库时,引入了sqlite.lib以及CppSqlite的两个文...

    ccf19881030
  • CString转换成const char*的一种有效方法

    在Visual Studio 200X下,CString直接转换成const char* 有点困难,下面是自己用的一种可行方案:

    ccf19881030
  • C/C++程序员 面试经历总结

        现在把一些问题总结一下,算是记录一下面试的经历吧。以后有空简单地回答一下,

    ccf19881030
  • vue项目简书(二)

    网址: https://github.com/semlinker/reactjs-interview-questions

    生南星
  • vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?!

    xing.org1^
  • swiper组件添加左右箭头

    前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。 思路很简单:在swip...

    连胜
  • swiper轮播图的使用

    用户4344670
  • swiper轮播图的使用(转载)

    用户6973020
  • 微信小程序自定义轮播面板样式

    在进行pc网站或移动端网站开发时,轮播经常会遇到,我们经常使用的就是swiper插件来实现轮播效果,如果想自定义其样式的话,完全可以重写其css,达到自定义的效...

    无邪Z
  • vue2.0使用swiper组件实现轮播

    import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';

    余生

扫码关注云+社区

领取腾讯云代金券