swiper实现横向可拖动时间线大事记效果代码

代码语言:html

所属分类:其他

代码描述:swiper实现横向可拖动时间线大事记效果代码

代码标签: swiper 横向 拖动 时间线 大事记

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-CN">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="renderer" content="webkit">
    <style>
        html
        body,
        ul,
        li,
        ol,
        dl,
        dd,
        dt,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        legend,
        img {
          margin: 0;
          padding: 0;
        }
        li {
          list-style: none;
        }
        .time-line-box {
          margin-top: 40px;
        }
        .time-line-box ul:after {
          content: '';
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAAA0CAYAAAAQRg3jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0