Html
    Css
    Js

    
                        
img {
	max-width:100%;
}
/* 以下样式均可删除 */
			.swiper-container {
	width:100%;
	height:39%;
	min-height:170px;
	border:1px solid green;
	border-radius:5px;
	margin:50px 0;
}
.panel-detail .detail-des-txt {
	font-size:12px;
	line-height:16px;
	transform:scale(0.9);
	text-align:center;
	padding-bottom:20px;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin:0 2px;
}
.swiper-pagination-bullet {
	height:2px;
	border-radius:0;
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
	bottom:5px;
}
#swiper-container2 {
	width:100%;
	max-height:400px;
}
@media (min-width:767px) {
	.swiper-container {
	height:42%;
}
.panel-detail .detail-des-txt {
	transform:scale(1);
	margin:6px 0;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

swiper常用滑动切换,banner切换

更新时间:2020-08-09 19:55:13

1.引入 swiper.min.css 和 swiper.min.js
2.贴上上面的代码即可

0