- <template>
- <div id="app">
- <div class="swiper-container">
- <div class="swiper-wrapper">
- <div class="swiper-slide">banner 1</div>
- <div class="swiper-slide">banner 2</div>
- <div class="swiper-slide">banner 3</div>
- <div class="swiper-slide">banner 4</div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import "./assets/swiper.min.CSS";
- import Swiper from "./assets/swiper.min.js";
- export default {
- name: 'app',
- mounted () {
- var swiper = new Swiper('.swiper-container', {
- pagination:'.swiper-pagination',
- slidesPerView:'auto',
- paginationClickable:true,
- spaceBetween:30,
- autoplay:1500,
- loop:true
- })
- }
- }
- </script>
- <style>
- html, body {
- position: relative;
- height: 100%;
- }
- body {
- background: #eee;
- font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
- font-size:14px;
- color:#000;
- margin:0;
- padding:0;
- }
- .swiper-container {
- width:100%;
- height:300px;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- background: #fff;
- width: 80%;
- height: 300px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- }
- </style>
来源: http://www.qdfuns.com/article/43450/a7e6cb72026499832c2d21bc96c77713.html