swiper7- 30. 开启轮播图片懒加载
作者:互联网
1 <template> 2 <div 3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" 4 class="swiper mySwiper" 5 > 6 <div class="swiper-wrapper"> 7 <div class="swiper-slide"> 8 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 9 <img data-src="images/nature-1.jpg" class="swiper-lazy" /> 10 <!-- Preloader image --> 11 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 12 </div> 13 <div class="swiper-slide"> 14 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 15 <img data-src="images/nature-2.jpg" class="swiper-lazy" /> 16 <!-- Preloader image --> 17 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 18 </div> 19 <div class="swiper-slide"> 20 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 21 <img data-src="images/nature-3.jpg" class="swiper-lazy" /> 22 <!-- Preloader image --> 23 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 24 </div> 25 <div class="swiper-slide"> 26 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 27 <img data-src="images/nature-4.jpg" class="swiper-lazy" /> 28 <!-- Preloader image --> 29 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 30 </div> 31 <div class="swiper-slide"> 32 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 33 <img data-src="images/nature-5.jpg" class="swiper-lazy" /> 34 <!-- Preloader image --> 35 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 36 </div> 37 <div class="swiper-slide"> 38 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 39 <img data-src="images/nature-6.jpg" class="swiper-lazy" /> 40 <!-- Preloader image --> 41 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 42 </div> 43 <div class="swiper-slide"> 44 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 45 <img data-src="images/nature-7.jpg" class="swiper-lazy" /> 46 <!-- Preloader image --> 47 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 48 </div> 49 <div class="swiper-slide"> 50 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 51 <img data-src="images/nature-8.jpg" class="swiper-lazy" /> 52 <!-- Preloader image --> 53 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 54 </div> 55 <div class="swiper-slide"> 56 <!-- Required swiper-lazy class and image source specified in data-src attribute --> 57 <img data-src="images/nature-9.jpg" class="swiper-lazy" /> 58 <!-- Preloader image --> 59 <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> 60 </div> 61 </div> 62 <div class="swiper-button-next"></div> 63 <div class="swiper-button-prev"></div> 64 <div class="swiper-pagination"></div> 65 </div> 66 <!-- 开启轮播图片懒加载 --> 67 </template> 68 <script> 69 import Swiper from "swiper/swiper-bundle.min.js"; 70 import "swiper/swiper-bundle.min.css"; 71 72 export default { 73 components: {}, 74 methods: {}, 75 mounted() { 76 this.$nextTick(() => { 77 // 创建swiper对象 78 var swiper = new Swiper(".mySwiper", { 79 lazy: true, 80 pagination: { 81 el: ".swiper-pagination", 82 clickable: true, 83 }, 84 navigation: { 85 nextEl: ".swiper-button-next", 86 prevEl: ".swiper-button-prev", 87 }, 88 }); 89 }); 90 }, 91 }; 92 </script> 93 94 <style> 95 html, 96 body { 97 position: relative; 98 height: 100%; 99 } 100 101 body { 102 background: #eee; 103 font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 104 font-size: 14px; 105 color: #000; 106 margin: 0; 107 padding: 0; 108 } 109 .swiper { 110 width: 100%; 111 height: 500px; 112 } 113 .swiper-slide { 114 text-align: center; 115 font-size: 18px; 116 background: #000; 117 } 118 119 .swiper-slide img { 120 width: auto; 121 height: auto; 122 max-width: 100%; 123 max-height: 100%; 124 -ms-transform: translate(-50%, -50%); 125 -webkit-transform: translate(-50%, -50%); 126 -moz-transform: translate(-50%, -50%); 127 transform: translate(-50%, -50%); 128 position: absolute; 129 left: 50%; 130 top: 50%; 131 } 132 </style>
标签:30,轮播,100%,50%,transform,height,swiper7,translate,swiper 来源: https://www.cnblogs.com/jyjy28/p/15686115.html