1 <template>
2 <div class="swiper mySwiper">
3 <div class="swiper-wrapper">
4 <div data-history="1" class="swiper-slide">Slide 1div>
5 <div data-history="Slide 2" class="swiper-slide">Slide 2div>
6 <div data-history="3" class="swiper-slide">Slide 3div>
7 <div data-history="Slide 4" class="swiper-slide">Slide 4div>
8 <div data-history="5" class="swiper-slide">Slide 5div>
9 <div data-history="Slide 6" class="swiper-slide">Slide 6div>
10 <div data-history="7" class="swiper-slide">Slide 7div>
11 <div data-history="Slide 8" class="swiper-slide">Slide 8div>
12 <div data-history="9" class="swiper-slide">Slide 9div>
13 div>
14 <div class="swiper-button-next">div>
15 <div class="swiper-button-prev">div>
16 <div class="swiper-pagination">div>
17
18 div>
19 template>
20 <script>
21 import Swiper from "swiper/swiper-bundle.min.js";
22 import "swiper/swiper-bundle.min.css";
23
24 export default {
25 components: {},
26 methods: {},
27 mounted() {
28 this.$nextTick(() => {
29 // 创建swiper对象
30 var swiper = new Swiper(".mySwiper", {
31 spaceBetween: 50,
32 slidesPerView: 1,
33 navigation: {
34 nextEl: ".swiper-button-next",
35 prevEl: ".swiper-button-prev",
36 },
37 pagination: {
38 el: ".swiper-pagination",
39 },
40 // 设置为true开启history导航，或者自定义history导航选项。
41 // 在slide切换时可无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
42 // 可惜，无法在vue的spa中使用，因为vue是单页面复用
43 history: {
44 key: "slide",
45 },
46 });
47 });
48 },
49 };
50 script>
51
52 <style>
53 html,
54 body {
55 position: relative;
56 height: 100%;
57 }
58
59 body {
60 background: #eee;
61 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
62 font-size: 14px;
63 color: #000;
64 margin: 0;
65 padding: 0;
66 }
67 .swiper {
68 width: 100%;
69 height: 500px;
70 }
71
72 .swiper-slide {
73 text-align: center;
74 font-size: 18px;
75 background: #fff;
76
77 /* Center slide text vertically */
78 display: -webkit-box;
79 display: -ms-flexbox;
80 display: -webkit-flex;
81 display: flex;
82 -webkit-box-pack: center;
83 -ms-flex-pack: center;
84 -webkit-justify-content: center;
85 justify-content: center;
86 -webkit-box-align: center;
87 -ms-flex-align: center;
88 -webkit-align-items: center;
89 align-items: center;
90 }
91
92 .swiper-slide img {
93 display: block;
94 width: 100%;
95 height: 100%;
96 object-fit: cover;
97 }
98 style>