轮播图片加载可能有点慢...
首先引入js，css
<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
以下是全部代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"> <style> .swiper-container { width: 100%; height:300px; } .swiper-slide { text-align: center; font-size: 50px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #444; } .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 1rem; left: 0; width: 100%; } .swiper-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%; } </style></head><body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="javascript:;"><img data-src="http://lorempixel.com/1600/1200/nature/1/" class="swiper-lazy"></a> <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> </div> <div class="swiper-slide"> <a href="javascript:;"><img data-src="http://lorempixel.com/1600/1200/nature/2/" class="swiper-lazy"></a> <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> </div> <div class="swiper-slide"> <a href="javascript:;"><img data-src="http://lorempixel.com/1600/1200/nature/3/" class="swiper-lazy"></a> <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div> --> </div> <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { touchStartPreventDefault : true, //true时阻止`touchstart` (`mousedown`)的默认事件 touchStartForcePreventDefault : true, //是否强制阻止`touchstart` (`mousedown`)的默认事件 默认false touchMoveStopPropagation : true, //true时阻止touchmove冒泡事件。 lazy: true, //图片延迟加载 loop: true, //是否循环轮播 autoplay: { delay: 4500, //轮播时间 disableOnInteraction: false, //是否禁止 autoplay }, speed:1000, //推动延迟时间 touchRatio : 2,//触摸变快 pagination: { el: '.swiper-pagination', //分页器 type: 'bullets', //分页器的样式 }, navigation: {// 如果需要前进后退按钮 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 //scrollbar: '.swiper-scrollbar', }); </script> </body></html>
