SpringBoot之Vue安装幻灯片插件

SpringBoot之Vue安装幻灯片插件

前台项目使用了nuxt模板,但这个模板没有Element组件,所以需要引入

Nuxt官网

1.安装插件
npm install vue-awesome-swiper
2. 新建nuxt-swiper-plugin.js,并放入内容

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
3.在 nuxt.config.js 文件中配置插件

plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],
  css: [
    'swiper/dist/css/swiper.css'
  ],
4.在assets下引入自己需要的静态资源

5.在页面中加入幻灯片
	<div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
          </a>
        </div>
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/153525d0ef15459596.jpg" alt="首页banner">
          </a>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"/>
      <div slot="button-prev" class="swiper-button-prev swiper-button-white"/>
      <div slot="button-next" class="swiper-button-next swiper-button-white"/>
    </div>
<script>
export default {
	data () {
		return {
			swiperOption: {
				//配置分页
				pagination: {
					el: '.swiper-pagination'//分页的dom节点
				},
				//配置导航
				navigation: {
					nextEl: '.swiper-button-next',//下一页dom节点
					prevEl: '.swiper-button-prev'//前一页dom节点
				}
			}
		}
	}
}
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值