标签：27 center align webkit Slide 锚点 swiper7 display swiper
1 <template>
2 <div class="swiper mySwiper">
3 <div class="swiper-wrapper">
4 <div data-hash="slide1" class="swiper-slide">Slide 1</div>
5 <div data-hash="slide2" class="swiper-slide">Slide 2</div>
6 <div data-hash="slide3" class="swiper-slide">Slide 3</div>
7 <div data-hash="slide4" class="swiper-slide">Slide 4</div>
8 <div data-hash="slide5" class="swiper-slide">Slide 5</div>
9 <div data-hash="slide6" class="swiper-slide">Slide 6</div>
10 <div data-hash="slide7" class="swiper-slide">Slide 7</div>
11 <div data-hash="slide8" class="swiper-slide">Slide 8</div>
12 <div data-hash="slide9" class="swiper-slide">Slide 9</div>
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: 30,
32 // 设置散列导航选项，或true使用默认值。为每个slide增加散列导航（有点像锚链接）
33 hashNavigation: {
34 watchState: true,
35 },
36 pagination: {
37 el: ".swiper-pagination",
38 clickable: true,
39 },
40 navigation: {
41 nextEl: ".swiper-button-next",
42 prevEl: ".swiper-button-prev",
43 },
44 });
45 });
46 },
47 };
48 </script>
49
50 <style>
51 html,
52 body {
53 position: relative;
54 height: 100%;
55 }
56
57 body {
58 background: #eee;
59 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
60 font-size: 14px;
61 color: #000;
62 margin: 0;
63 padding: 0;
64 }
65 .swiper {
66 width: 100%;
67 height: 500px;
68 }
69
70 .swiper-slide {
71 text-align: center;
72 font-size: 18px;
73 background: #fff;
74
75 /* Center slide text vertically */
76 display: -webkit-box;
77 display: -ms-flexbox;
78 display: -webkit-flex;
79 display: flex;
80 -webkit-box-pack: center;
81 -ms-flex-pack: center;
82 -webkit-justify-content: center;
83 justify-content: center;
84 -webkit-box-align: center;
85 -ms-flex-align: center;
86 -webkit-align-items: center;
87 align-items: center;
88 }
89
90 .swiper-slide img {
91 display: block;
92 width: 100%;
93 height: 100%;
94 object-fit: cover;
95 }
96 </style>
标签：27,center,align,webkit,Slide,锚点,swiper7,display,swiper 来源： https://www.cnblogs.com/jyjy28/p/15686112.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。