基于Bootstrap的垂直滚动新闻特效

PetitQ 幻灯片/轮播 2018-11-07 3.47K 0 1

这是一款基于 Bootstrap 的垂直滚动新闻特效。原生的 Bootstrap 只有水平的轮播图插件。该特效通过修改 HTML 结构和 CSS 样式来达到垂直滚动轮播的效果。

使用方法：

在页面中引入 jquery 和 bootstrap 的相关文件。

也想出现在这里？联系我们吧

<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

HTML 结构：

该垂直滚动新闻特效的基本 HTML 结构如下：

```
<div class="bg-demo">
```
```
  <div class="container">
```

    <div id="carousel-example-vertical" class="carousel vertical slide">

      <div class="carousel-inner" role="listbox">

```
        <div class="item active">
```
```
          <p class="ticker-headline">
```
```
            <a href="#">
```

              滚动新闻内容。。。

```
            </a>
```
```
          </p>
```
```
        </div>
```
```
        ......
```
```
      </div>
```
```
      
```

      <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

```
      </a>
```

      <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

```
      </a>
```
```
    </div>
```
```
  </div>
```
```
</div>
```

CSS 样式：

为该垂直滚动新闻特效添加下面的 CSS 样式：

```
body {
```
```
  margin: 50px 0;
```
```
}
```
```
.bg-demo{
```
```
  background: #66677c;
```
```
}
```
```
.ticker-headline {
```
```
  overflow: hidden;
```
```
  text-overflow: ellipsis;
```
```
  white-space: nowrap;
```
```
  padding: 25px 0;
```
```
  margin: 0;
```
```
  font-size: 18px;
```
```
}
```
```
 
```
```
.carousel.vertical .carousel-inner {
```
```
  height: 100%;
```
```
  width: auto;
```
```
}
```

.carousel.vertical .carousel-inner > .item {

```
  width: auto;
```
```
  padding-right: 50px;
```

  -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 > .item {

    -webkit-transition: 0.6s ease-in-out;

```
    transition: 0.6s ease-in-out;
```
```
  }
```

  .carousel.vertical .carousel-inner > .item.next,

  .carousel.vertical .carousel-inner > .item.active.right {

    -webkit-transform: translate3d(0, 100%, 0);

            transform: translate3d(0, 100%, 0);

```
    top: 0;
```
```
  }
```

  .carousel.vertical .carousel-inner > .item.prev,

  .carousel.vertical .carousel-inner > .item.active.left {

    -webkit-transform: translate3d(0, -100%, 0);

            transform: translate3d(0, -100%, 0);

```
    top: 0;
```
```
  }
```

  .carousel.vertical .carousel-inner > .item.next.left,

  .carousel.vertical .carousel-inner > .item.prev.right,

  .carousel.vertical .carousel-inner > .item.active {

    -webkit-transform: translate3d(0, 0, 0);

            transform: translate3d(0, 0, 0);

```
    top: 0;
```
```
  }
```
```
}
```

.carousel.vertical .carousel-inner > .active,

.carousel.vertical .carousel-inner > .next,

.carousel.vertical .carousel-inner > .prev {

```
  display: block;
```
```
}
```

.carousel.vertical .carousel-inner > .active {

```
  top: 0;
```
```
}
```

.carousel.vertical .carousel-inner > .next,

.carousel.vertical .carousel-inner > .prev {

```
  position: absolute;
```
```
  top: 0;
```
```
  width: 100%;
```
```
}
```

.carousel.vertical .carousel-inner > .next {

```
  top: 100%;
```
```
}
```

.carousel.vertical .carousel-inner > .prev {

```
  top: -100%;
```
```
}
```

.carousel.vertical .carousel-inner > .next.left,

.carousel.vertical .carousel-inner > .prev.right {

```
  top: 0;
```
```
}
```

.carousel.vertical .carousel-inner > .active.left {

```
  top: -100%;
```
```
}
```

.carousel.vertical .carousel-inner > .active.right {

```
  top: 100%;
```
```
}
```
```
 
```
```
.carousel.vertical .carousel-control {
```
```
  left: auto;
```
```
  width: 50px;
```
```
}
```

.carousel.vertical .carousel-control.up {

```
  top: 0;
```
```
  right: 0;
```
```
  bottom: 50%;
```
```
}
```

.carousel.vertical .carousel-control.down {

```
  top: 50%;
```
```
  right: 0;
```
```
  bottom: 0;
```
```
}
```

.carousel.vertical .carousel-control .icon-prev,

.carousel.vertical .carousel-control .icon-next,

.carousel.vertical .carousel-control .glyphicon-chevron-up,

.carousel.vertical .carousel-control .glyphicon-chevron-down {

```
  position: absolute;
```
```
  top: 50%;
```
```
  z-index: 5;
```
```
  display: inline-block;
```
```
}
```

.carousel.vertical .carousel-control .icon-prev,

.carousel.vertical .carousel-control .glyphicon-chevron-up {

```
  left: 50%;
```
```
  margin-left: -10px;
```
```
  top: 50%;
```
```
  margin-top: -10px;
```
```
}
```

.carousel.vertical .carousel-control .icon-next,

.carousel.vertical .carousel-control .glyphicon-chevron-down {

```
  left: 50%;
```
```
  margin-left: -10px;
```
```
  top: 50%;
```
```
  margin-top: -10px;
```
```
}
```

.carousel.vertical .carousel-control .icon-up,

.carousel.vertical .carousel-control .icon-down {

```
  width: 20px;
```
```
  height: 20px;
```
```
  line-height: 1;
```
```
  font-family: serif;
```
```
}
```

.carousel.vertical .carousel-control .icon-prev:before {

```
  content: '\2039';
```
```
}
```

.carousel.vertical .carousel-control .icon-next:before {

```
  content: '\203a';
```
```
}
```

基于 Bootstrap 的垂直滚动新闻特效

已有 868 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

基于Bootstrap的垂直滚动新闻特效

使用方法：

HTML 结构：

CSS 样式：

基于 Bootstrap 的垂直滚动新闻特效

相关文章

基于Animate全屏幻灯片jQuery插件

jQuery超实用文字和图片列表滚动插件

3D Rotating Carousel 3D旋转图片插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法：

HTML 结构：

CSS 样式：

基于 Bootstrap 的垂直滚动新闻特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复