swiper7-8. 初始化是控制图片是居中还是靠左 

  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     <div class="swiper-pagination"></div>
 15   </div>
 16 </template>
 17 <script>
 18 import Swiper from "swiper/swiper-bundle.min.js";
 19 import "swiper/swiper-bundle.min.css";
 20 
 21 export default {
 22   components: {},
 23   methods: {},
 24   mounted() {
 25     this.$nextTick(() => {
 26       // 创建swiper对象
 27       const swiper = new Swiper(".mySwiper", {
 28         slidesPerView: 4, // 轮播图容器中出现多少张swiper-slide,单位number or auto,重复了？swiperseven.vue用过这个属性
 29         spaceBetween: 30, // 用于作为间隔，每张轮播图之间的间隔单位px，spaceBetween : '10%',按container的百分比
 30         centeredSlides: true, // 设置为true的时候，滚动容器中的图片居中而不是居左
 31         pagination: {
 32           el: ".swiper-pagination",
 33           clickable: true,
 34         },
 35       });
 36     });
 37   },
 38 };
 39 </script>
 40 
 41 <style>
 42 html,
 43 body {
 44   position: relative;
 45   height: 100%;
 46 }
 47 
 48 body {
 49   background: #eee;
 50   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 51   font-size: 14px;
 52   color: #000;
 53   margin: 0;
 54   padding: 0;
 55 }
 56 
 57 .swiper {
 58   width: 100%;
 59   height: 700px;
 60 }
 61 
 62 .swiper-slide {
 63   text-align: center;
 64   font-size: 18px;
 65   background: #fff;
 66 
 67   /* Center slide text vertically */
 68   display: -webkit-box;
 69   display: -ms-flexbox;
 70   display: -webkit-flex;
 71   display: flex;
 72   -webkit-box-pack: center;
 73   -ms-flex-pack: center;
 74   -webkit-justify-content: center;
 75   justify-content: center;
 76   -webkit-box-align: center;
 77   -ms-flex-align: center;
 78   -webkit-align-items: center;
 79   align-items: center;
 80 }
 81 
 82 .swiper-slide img {
 83   display: block;
 84   width: 100%;
 85   height: 100%;
 86   object-fit: cover;
 87 }
 88 
 89 .swiper-slide {
 90   width: 80%;
 91 }
 92 
 93 .swiper-slide:nth-child(2n) {
 94   width: 60%;
 95 }
 96 
 97 .swiper-slide:nth-child(3n) {
 98   width: 40%;
 99 }
100 </style>

 

posted @ 2021-12-12 17:39  sky-su  阅读(580)  评论(0)    收藏  举报