.widget-slides { position: relative; margin: 0 auto; padding: 0; max-width: 450px } .widget-slides .widget-body { padding: 0 } .widget-slides .widget-footer { padding: 0; margin: 0; border: 0; display: none } .widget-slides .list-item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100% } .widget-slides .title { display: none } .widget-slides.widget-slides-dot .widget-footer { display: block; position: absolute; left: 0; width: 100%; bottom: 0; height: 20px; text-align: center; background: 0 0 } .widget-slides.widget-slides-dot .widget-footer .nav-list-item { display: inline-block; border-radius: 50%; width: 10px; height: 10px; margin: 3px; background: rgba(0,0,0,.5) } .widget-slides.widget-slides-dot .widget-footer .nav-list-item.on { background: rgba(0,0,0,.8) } .widget-slides.widget-slides-line .widget-footer { display: block; position: absolute; left: 0; width: 100%; bottom: 0; height: 10px } .widget-slides.widget-slides-line .nav-list { display: -webkit-flex; display: flex } .widget-slides.widget-slides-line .widget-footer .nav-list-item { flex: 100% 1; -webkit-flex: 100% 1; height: 10px; background: rgba(0,0,0,.5) } .widget-slides.widget-slides-line .widget-footer .nav-list-item.on { background: rgba(0,0,0,.8) } .widget-slides.widget-slides-news .widget-footer { display: block; position: absolute; left: 0; width: 100%; bottom: 0; height: 30px; text-align: right; z-index: 1 } .widget-slides.widget-slides-news .widget-footer .nav-list-item { display: inline-block; border-radius: 50%; width: 5px; height: 5px; margin: 12px 5px; background: rgba(0,0,0,.5) } .widget-slides.widget-slides-news .widget-footer .nav-list-item.on { background: #fff } .widget-slides.widget-slides-news .list-item { position: relative } .widget-slides.widget-slides-news .title { box-sizing: border-box; display: block; position: absolute; left: 0; width: 100%; bottom: 0; height: 30px; line-height: 30px; text-align: left; z-index: 1; color: #fff; padding-left: 1em; border-top: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 0 1px #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,.1)), color-stop(100%, rgba(0,0,0,.3))); background: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0, rgba(0,0,0,.3) 100%); background: linear-gradient(to bottom, rgba(0,0,0,.1) 0, rgba(0,0,0,.3) 100%) }