感谢鞭策我的甲方们。
如图一个timeline,可以用carousel来代替,工作量集中在两点。
- 内容部分,可以用post+grid来制作出各种样式的展示形式;
- 下边的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来替代。