标签：ext between temp bsp return als 元素 strong dsl
一、安装依赖
npm install vue-awesome-swiper --save
二、引入awesome-swiper
src/main.js修改
import Vue from ‘vue‘
import App from ‘./App‘import router from ‘./router‘import VueAwesomeSwiper from ‘vue-awesome-swiper‘import ‘swiper/css/swiper.css‘Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘})Vue.use(VueAwesomeSwiper)<template>
<div> <swiper :options="swiperOption"> <swiper-slide></swiper-slide> <swiper-slide></swiper-slide> <!--以下看需要添加--> <div class="swiper-scrollbar"></div> //滚动条 <div class="swiper-button-next"></div> //下一项 <div class="swiper-button-prev"></div> //上一项 <div class="swiper-pagination"></div> //标页码 </swiper> </div></template> |
<script>
import { Swiper, SwiperSlide, directive } from ‘vue-awesome-swiper‘import ‘swiper/css/swiper.css‘export default { name: "index", components: { Swiper, SwiperSlide }, directives: { swiper: directive }, data () { return { swiperOption: { // 分页器配置 pagination: { el: ‘.swiper-pagination‘, clickable: true }, // 设定初始化时slide的索引 initialSlide: 0, //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical) direction: ‘horizontal‘, // 自动切换图配置 autoplay: { delay: 5000, stopOnLastSlide: false, disableOnInteraction: true }, // 箭头配置 navigation: { nextEl: ‘.swiper-button-next‘, prevEl: ‘.swiper-button-prev‘, }, // 环状轮播 loop: true, slidesPerView: ‘auto‘, loopedSlides: 3, loopAdditionalSlides: 0, // 一个屏幕展示的数量 slidesPerView: 1, // 间距 // spaceBetween: 26, // 修改swiper自己或子元素时，自动初始化swiper observer: true, // 修改swiper的父元素时，自动初始化swiper observeParents: true } } }}</script> |
标签：ext between temp bsp return als 元素 strong dsl
原文地址：https://www.cnblogs.com/anna001/p/14866606.html
