标签：一张 center align 点击 webkit Slide swiper7 display swiper
1 <template>
2 <div class="swiper mySwiper">
3 <div class="swiper-wrapper">
4 <div class="swiper-slide">Slide 1</div>
5 <div class="swiper-slide">Slide 2</div>
6 <div class="swiper-slide">Slide 3</div>
7 <div class="swiper-slide">Slide 4</div>
8 <div class="swiper-slide">Slide 5</div>
9 <div class="swiper-slide">Slide 6</div>
10 <div class="swiper-slide">Slide 7</div>
11 <div class="swiper-slide">Slide 8</div>
12 <div class="swiper-slide">Slide 9</div>
13 </div>
14 <!-- 下面两个是前后按钮 -->
15 <div class="swiper-button-next"></div>
16 <div class="swiper-button-prev"></div>
17 </div>
18 </template>
19 <script>
20 import Swiper from "swiper/swiper-bundle.min.js";
21 import "swiper/swiper-bundle.min.css";
22
23 export default {
24 components: {},
25 methods: {},
26 mounted() {
27 window.setTimeout(() => {
28 // 创建swiper对象
29 const swiper = new Swiper(".mySwiper", {
30 // 增加了前进后退功能
31 navigation: {
32 nextEl: ".swiper-button-next",
33 prevEl: ".swiper-button-prev",
34 },
35 });
36 }, 2000);
37 },
38 };
39 </script>
40
41 <style lang="scss" scoped>
42 .swiper {
43 width: 100%;
44 height: 700px;
45 }
46
47 .swiper-slide {
48 text-align: center;
49 font-size: 18px;
50 background: #fff;
51
52 /* Center slide text vertically */
53 display: -webkit-box;
54 display: -ms-flexbox;
55 display: -webkit-flex;
56 display: flex;
57 -webkit-box-pack: center;
58 -ms-flex-pack: center;
59 -webkit-justify-content: center;
60 justify-content: center;
61 -webkit-box-align: center;
62 -ms-flex-align: center;
63 -webkit-align-items: center;
64 align-items: center;
65 }
66
67 .swiper-slide img {
68 display: block;
69 width: 100%;
70 height: 100%;
71 /* object-fit 让图片适应容器，但是设置宽高百分百，还有必要设置这个属性吗 */
72 object-fit: cover;
73 }
74 </style>
标签：一张,center,align,点击,webkit,Slide,swiper7,display,swiper 来源： https://www.cnblogs.com/jyjy28/p/15679866.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。