左右滑动效果（需引入swiper4.0以上版本）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用swiper做导航栏</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript" src="js/jQuery.js"></script>
<script src="js/swiper.min.js"></script>
<style>
.swiper-container{
width: 300px;
height: 50px;
border: 1px solid #999999;
}
.swiper-slide{
text-align: center;
line-height: 50px;
font-size: 12px;
}
.active{
color: #eb4610;
}
</style>
</head>
<body>
<section>
<div>
<div class="swiper-slide active">标题一</div>
<div>标题二</div>
<div>标题三</div>
<div>标题四</div>
<div>标题五</div>
<div>标题六</div>
<div>标题七</div>
<div>标题八</div>
<div>标题九</div>
<div>标题十</div>
<div>标题十一</div>
<div>标题十二</div>
<div>标题十三</div>
<div>标题十四</div>
</div>
</section>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-container>.swiper-wrapper>.swiper-slide').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
});
</script>
</body>
</html>
川公网安备 51010702002669号
18605917465
客服QQ