Timeline制作工作日志

感谢鞭策我的甲方们。

如图一个timeline，可以用carousel来代替，工作量集中在两点。

1. 内容部分，可以用post+grid来制作出各种样式的展示形式；
2. 下边的bullets部分，需要用到不少css代码。记录如下

.owl-carousel button.owl-dot {
border: 2px solid #fff;
border-radius: 50%;
margin: 0 5%;
}

.color_primary .owl-dot span, .color_secondary .owl-dot span {
background: #fff;
color: inherit;
width: 12px;
height: 12px;
}

.owl-dot.active span
{
background: var(--color-content-primary) !important;
box-shadow: none;
border: 0;
transform: translateY(2px);
}

.owl-carousel button.owl-dot.active {
border: 0;
}

.owl-dot.active:before {
content: "\f3c5";
font-family: "fontawesome";
font-size: 2rem;
display: block;
position: relative;
font-weight: 200;
transform: translateY(-4px);
}

.owl-dots:after {
content: "";
width: 98%;
height: 3px;
display: block;
margin: -15px auto 15px;
background: #fff;
}

.owl-carousel.navpos_outside.navstyle_circle > .owl-nav div:hover, .owl-carousel.navpos_outside.navstyle_block > .owl-nav div:hover {
background: rgba(0, 0, 0, 0.2) !important;
}

思考，

• 如果背景图也跟着轮换，这套方法依然行得通；
• 如果下边的bullet加上时间或者标题，则可以用万能的slider revolution来替代。