标签：containe wrap type ace 今天 jquer disable idt pac
前两天的一个项目中遇到多组图片无限轮播，当时采用了swiper 但是没有解决让它无限轮播。今天再次尝试了一下发现是自己的样式写错了。今天在这里写一下，为了给自己一个警醒不要犯同样的错误
首先先引入一下swiper的css文件和js文件
<link rel="stylesheet" type="text/css" href="../swiper-4.5.0/dist/css/swiper.min.css" /> <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../swiper-4.5.0/dist/js/swiper.min.js"></script>
之后再HTML中写入轮播的
<div class="tupian swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo1.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo2.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo3.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo4.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo5.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo1.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo2.png" /> </div> </div> <div class="swiper-slide"> <div class="tupianimg"> <img src="../img/img/lunbo3.png" /> </div> </div> </div> </div>
css样式
.container { width: 100%; } .container .tupian { margin-top: 19px; height: 200px; } .swiper-container { width: 900px; margin: 0 auto; height: 200px; } .container .tupian .swiper-slide { width: 300px; height: 200px; } .container .tupian .tupianimg { width: 100%; height: 200px; position: relative; } .container .tupian .tupianimg img { width: 100%; height: 200px; }
script
var swiper = new Swiper(‘.swiper-container‘, { spaceBetween: 20, loop: true, slidesPerView: ‘auto‘, loopedSlides: 5, autoplay: { delay: 1500, disableOnInteraction: false, }, });
这样就可以完成自动无限轮播
标签：containe wrap type ace 今天 jquer disable idt pac
原文地址：https://www.cnblogs.com/rose-1121/p/10710300.html
