敢于直言批评你的人,定是你命中的贵人

swiper应用之垂直滚动效果

js xiaoyun 663℃ 0评论

话不多说,先看代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>垂直滚动展示效果</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
li {
list-style: none;
}

li a {
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
</style>
</head>

<body>
<div class="container swiper-container notice-list">
<ul class="row swiper-wrapper">
<li class="swiper-slide swiper-no-swiping"><a href="">有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管有关部门对于质量安全对于质量安全对于质量安全</a></li>
<li class="swiper-slide swiper-no-swiping"><a href="">有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管有关部门对于质量安全对于质量安全对于质量安全</a></li>
<li class="swiper-slide swiper-no-swiping"><a href="">有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管有关部门对于质量安全对于质量安全对于质量安全</a></li>
<li class="swiper-slide swiper-no-swiping"><a href="">有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管有关部门对于质量安全对于质量安全对于质量安全</a></li>
<li class="swiper-slide swiper-no-swiping"><a href="">有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管、监控相关的活动主题动态,有关部门对于质量安全监管有关部门对于质量安全对于质量安全对于质量安全</a></li>
</ul>
</div>
<script type="text/javascript">
var noticeSwiper = new Swiper('.notice-list', {
paginationClickable: true,
autoplay: 2000,
direction: 'vertical',//垂直方向
});
</script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

注意要点:

<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>一定要放在头部才可以正常显示

转载请注明:小云之家 » swiper应用之垂直滚动效果

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址