html 轮播图 实例,swiper轮播图实例

Swiper demo

html, body {

position: relative;

width: 100%;

height: 100%;

}

body {

margin: 0;

padding: 0;

}

.m-swiper-container{width: 100%;}

.m-swiper-slide{display: block; background-size: 100% 100%;}

.m-swiper-img{width: 100%;}

var swiperWrapper = $('#m-swiper-wrapper');

var json = [{

img:'https://img-blog.csdn.net/20180531112426283',

url:'http://www.baidu.com'

},

{

img:'https://img-blog.csdn.net/20180531112432547',

url:'http://www.baidu.com'

},

{

img:'https://img-blog.csdn.net/20180531112437692',

url:'http://www.baidu.com'

}];

var html = '';

for (var i = 0; i < json.length; i++) {

html += '' +

'' +

'';

}

swiperWrapper.html(html);

var swiper = new Swiper('#m-swiper-container', {

speed:300,

autoplay : {

delay:3000

},

loop: true

});

备注：欢迎加入web前端求职招聘qq群：668352707