html5应用swiper实现无缝轮播 html

注：移动端页面，如需用在PC端请自行调整样式
需要引入的代码

="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"> ="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.js">

html代码

文章图片文章图片文章图片文章图片

script代码

="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.js">> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, loop: true,//实现无缝轮播 autoplay: { delay: 2500,//每一次跳转的时间 disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, //左右按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });

style代码

html, body { position: relative; height: 100%; background-color: #F1F1F5; }body { margin: 0; padding: 0; }.srceem { width: 100%; margin: 0; }.swiper-container { width: 100%; height: 12rem; background-color: black; display: flex; }.swiper-slide { text-align: center; /* 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; z-index: 99; }.lunboimg { width: 100%; height: auto; }

【html5应用swiper实现无缝轮播】效果图