App.vue
<template>
<div id="app">
<el-container>
<div style="margin:20px 0">
<swiper ref="mySwiper" :options="swiperOptions" style="height:100px;overflow: hidden;">
<swiper-slide v-for="item in banner" :key="item.id">
<img :src="item.src" width="100%" height="100%" />
</swiper-slide>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" slot="button-prev" @click="goprev"></div>
<div class="swiper-button-next" slot="button-next" @click="gonext"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<el-carousel height="250px" trigger="click" indicator-position="outside" arrow="always" :autoplay="true">
<el-carousel-item v-for="item in banner" :key="item.id">
<img :src="item.src" height="100%" width="100%" />
</el-carousel-item>
</el-carousel>
<el-header>
<el-menu mode="horizontal" :default-active="$route.path" class="el-menu-demo">
<el-menu-item index="/home">
<router-link to="/home">首页</router-link>
</el-menu-item>
<el-menu-item index="/login">
<router-link to="/login">登录</router-link>
</el-menu-item>
<el-menu-item index="/reg">
<router-link to="/reg">注册</router-link>
</el-menu-item>
<el-menu-item index="/brand">
<router-link to="/brand">品牌</router-link>
</el-menu-item>
<el-menu-item index="/stu">
<router-link to="/stu">学生信息</router-link>
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</div>
</template>
<script>
//1)下载npm install swiper vue-awesome-swiper --save
import {
Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css"; //2)引入swiper和css插件
export default {
components: {
//3)插入组件
Swiper,
SwiperSlide,
},
computed: {
//4)swiper=>计算属性,之后可用slidePrev()..
swiper() {
return this.$refs.mySwiper.$swiper; }, },
methods: {
//Swiper{}实例,之后下面的方法才可使用
goprev() {
this.swiper.slidePrev();},
gonext() {
this.swiper.slideNext(); },},
data() {
return {
// activeIndex: "1",
banner: [
{
id: 0, src: "https://source.unsplash.com/user/erondu/1600x900" },
{
id: 1, src: "https://source.unsplash.com/user/erondu/1600x900" },
{
id: 2, src: "https://source.unsplash.com/user/erondu/1600x900" },
{
id: 3, src: "https://source.unsplash.com/user/erondu/1600x900" },
]<