阿宁blog
阿宁blog

将您懂的、您知道的全部写在这里

admin2018-03-07 人围观 学习笔记

摘要 BootStrap作为优秀的前端响应式框架,提供了Carousel图片轮播功能。

BootStrap作为优秀的前端响应式框架,提供了Carousel图片轮播JS插件。只需要简单的改造就可以制作出上下滚动的轮播图。

新闻标题垂直滚动效果_52zoomla

CSS代码,引在bootstrap.min.css之后

/*垂直轮播样式*/
.carousel.vertical .carousel-inner { 
  width: 100%;
  margin-left:2rem;
  margin-right:3.5rem;
}
.carousel-control-prev
.carousel.vertical .carousel-inner > .carousel-item {
	width:100%;
  -webkit-transition: 0.6s ease-in-out top;
  transition: 0.6s ease-in-out top;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel.vertical .carousel-inner > .carousel-item {
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
  }
  .carousel.vertical .carousel-inner > .carousel-item.carousel-item-next,
   .carousel.vertical .carousel-inner > .carousel-item.active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    top: 0;
  }
  .carousel.vertical .carousel-inner > .carousel-item.carousel-item-prev, 
  .carousel.vertical .carousel-inner > .carousel-item.active.carousel-item-left {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    top: 0;
    width:100%;
  }
  .carousel.vertical .carousel-inner > .carousel-item.carousel-item-next.carousel-item-left, 
  .carousel.vertical .carousel-inner > .carousel-item.carousel-item-prev.carousel-item-right,
   .carousel.vertical .carousel-inner > .carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    top: 0;
  }
}


HTML5代码,为boostrap原版的代码 添加class类名 vertical

 <div class="tophouse d-flex">
    	<div>新开楼盘<span class="fa fa-bullhorn"></span></div>
    	<div id="house-notice" class="carousel d-flex vertical slide">
  <div class="carousel-inner">
  	 <!--<a href="#">蓝波湾公寓34号住宅、网点</a><span class="float-right">2018.1.30</span>-->
    <div class="carousel-item">
      <a href="#">蓝波湾公寓30号</a><span class="float-right">2018.1.30</span>
    </div>
    <div class="carousel-item active">
      <a href="#">蓝波湾公寓29号</a><span class="float-right">2018.1.30</span>
    </div>
    <div class="carousel-item" >
      <a href="#">蓝波湾公寓34号住宅、网点</a><span class="float-right">2018.1.30</span>
    </div>
  </div>
  <div class="d-flex">
  	<a class="carousel-control-prev" href="#house-notice" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#house-notice" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a></div>
</div>
</div>