1 <template>
2 <div
3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
4 class="swiper mySwiper"
5 >
6 <div
7 class="parallax-bg"
8 style="background-image: url(./images/nature-1.jpg)"
9 data-swiper-parallax="-23%"
10 >div>
11 <div class="swiper-wrapper">
12 <div class="swiper-slide">
13 <div class="title" data-swiper-parallax="-300">Slide 1div>
14 <div class="subtitle" data-swiper-parallax="-200">Subtitlediv>
15 <div class="text" data-swiper-parallax="-100">
16 <p>
17 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
18 dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
19 laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
20 Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
21 Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper
22 velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
23 libero. Aenean feugiat non eros quis feugiat.
24 p>
25 div>
26 div>
27 <div class="swiper-slide">
28 <div class="title" data-swiper-parallax="-300">Slide 2div>
29 <div class="subtitle" data-swiper-parallax="-200">Subtitlediv>
30 <div class="text" data-swiper-parallax="-100">
31 <p>
32 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
33 dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
34 laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
35 Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
36 Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper
37 velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
38 libero. Aenean feugiat non eros quis feugiat.
39 p>
40 div>
41 div>
42 <div class="swiper-slide">
43 <div class="title" data-swiper-parallax="-300">Slide 3div>
44 <div class="subtitle" data-swiper-parallax="-200">Subtitlediv>
45 <div class="text" data-swiper-parallax="-100">
46 <p>
47 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
48 dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
49 laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
50 Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
51 Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper
52 velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
53 libero. Aenean feugiat non eros quis feugiat.
54 p>
55 div>
56 div>
57 div>
58 <div class="swiper-button-next">div>
59 <div class="swiper-button-prev">div>
60 <div class="swiper-pagination">div>
61 div>
62
63 template>
64 <script>
65 import Swiper from "swiper/swiper-bundle.min.js";
66 import "swiper/swiper-bundle.min.css";
67
68 export default {
69 components: {},
70 methods: {},
71 mounted() {
72 this.$nextTick(() => {
73 // 创建swiper对象
74 var swiper = new Swiper(".mySwiper", {
75 speed: 600,
76 parallax: true,
77 pagination: {
78 el: ".swiper-pagination",
79 clickable: true,
80 },
81 navigation: {
82 nextEl: ".swiper-button-next",
83 prevEl: ".swiper-button-prev",
84 },
85 });
86 });
87 },
88 };
89 script>
90
91 <style>
92 html,
93 body {
94 position: relative;
95 height: 100%;
96 }
97
98 body {
99 background: #eee;
100 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
101 font-size: 14px;
102 color: #000;
103 margin: 0;
104 padding: 0;
105 }
106 .swiper {
107 width: 100%;
108 height: 500px;
109 }
110 .swiper-slide {
111 font-size: 18px;
112 color: #fff;
113 -webkit-box-sizing: border-box;
114 box-sizing: border-box;
115 padding: 40px 60px;
116 }
117
118 .parallax-bg {
119 position: absolute;
120 left: 0;
121 top: 0;
122 width: 130%;
123 height: 100%;
124 -webkit-background-size: cover;
125 background-size: cover;
126 background-position: center;
127 }
128
129 .swiper-slide .title {
130 font-size: 41px;
131 font-weight: 300;
132 }
133
134 .swiper-slide .subtitle {
135 font-size: 21px;
136 }
137
138 .swiper-slide .text {
139 font-size: 14px;
140 max-width: 400px;
141 line-height: 1.3;
142 }
143 style>