swiper 定义放多少张图片_Swiper滚动图片显示当前图片是第几张图片

展开全部

/*单个切换的幻灯片e68a843231313335323631343130323136353331333339653662 s*/

.banner{

position: relative;

overflow: hidden;

}

.banner-publicHt{

height: 396px;

}

.img-box{

display: inline-block;

width: 100%;

}

.swiper-slide {

text-align: center;

font-size: 36px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: left;

-ms-flex-pack: left;

-webkit-justify-content: left;

justify-content: left;

-webkit-box-align: left;

-ms-flex-align: left;

-webkit-align-items: left;

align-items: left;

}

.banner .swiper-slide img{

width: 100%;

}

.banner .swiper-pagination-bullet-active{

background: url("/img/off.png") no-repeat;

}

.banner .swiper-pagination-bullet{

background: url("/img/on.png") no-repeat;

}

.banner .swiper-container-horizontal>.swiper-pagination{

left: 160px;

}

.num-check{

position: absolute;

right: 0;

bottom: 0px;

background-color: #000;

opacity: 0.7;

width: 100%;

height: 50px;

z-index: 998;

}

.num-choose{

position: absolute;

right: 5%;

bottom: 0px;

color: #FCFBFB;

font-size: 22px;

display: inline-block;

width: 90%;

height: 50px;

line-height: 50px;

z-index: 999;

text-align: right;

}

/*单个切换的幻灯片 e*/

/

$(function(){

$(".checkLength").html(1);

/*单个切换的幻灯效果*/

var swiper = new Swiper('.banner .swiper-container', {

pagination: '.banner .swiper-pagination',

paginationClickable: true,

spaceBetween: 30,

/*每隔5秒就进行一次图片切换*/

autoplay:5000,

// direction: 'vertical',

/*用户操作之后(swipes,arrow以及pagination 点击)autoplay不会被禁掉*/

autoplayDisableOnInteraction:false,

onSlideChangeStart: function(swiper){

$(".checkLength").html(swiper.activeIndex+1);

}

});

/*获取图片长度*/

var imgAllLength = $(".swiper-slide .banner-publicHt").length;

console.log(imgAllLength);

$(".allImgLength").html(imgAllLength);

/*图片报错或者为空的时候默认现在这张图片*/

$(".banner-publicHt").on('error',function(){

$(this).prop('src','../swiper/img/banner1.jpg');

})

})

已赞过

已踩过<

你对这个回答的评价是？

评论

收起