.slider { position: relative; height: 327px; width: 100%; overflow: hidden; img { max-width: 100%; max-height: 100%; } } .slide-pagination { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; } .slide-pagination-inner { display: inline-block; position: relative; padding: 7px; vertical-align: middle; } .slide-shade { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: 0.3; border-radius: 13px; } .slide-pagination-last span { display: block; float: left; position: relative; margin: 0 7px; width: 12px; height: 12px; background: #fff; cursor: pointer; opacity: 0.6; border-radius: 6px; z-index: 2; &.focus { opacity: 1; } } .slide-switch { display: none; &.show { display: block; } a { display: block; position: absolute; top: 50%; margin: -30px 0 0; width: 60px; height: 60px; line-height: 56px; text-align: center; z-index: 2; background: #fff; opacity: 0.55; &:hover { opacity: 0.9; } .iconfont { font-size: 32px; color: #59585a; } } .prev { left: 0; } .next { right: 0; } }