.slider-wrapper { position: relative; padding: 0; } .slider-wrapper .dots-wrapper li { display: inline-block; width: 12px; height: 12px; background-color: #cccccc; border-radius: 50%; margin: 0 4px; opacity: 0.5; cursor: pointer; transition: opacity 0.3s; } .slider-wrapper .dots-wrapper li.active, .slider-wrapper .dots-wrapper li:hover { opacity: 1; background: #9DAD00 !important; } .slider-wrapper .dots-wrapper li:last-child { width: 10px; height: 10px; } .slider-wrapper .slider { position: relative; width: 100%; margin: 0 auto; cursor: pointer; overflow: hidden; } .slider-wrapper .slider .slider-inner { position: absolute; } .slider-wrapper .slider .slider-inner:after { content: ""; display: table; clear: both; } .slider-wrapper .slider .slider-inner .slide { float: left; box-sizing: border-box; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; }  .slider-wrapper a[class|="arrow"] { position: absolute; display: block; } .slider-wrapper .arrow-left { left: 0; } .slider-wrapper .arrow-right { right: 0; }