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 1</div>
 14         <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
 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 2</div>
 29         <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
 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 3</div>
 44         <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
 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>