@import url("reset.less"); /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; &:focus { outline: none; } &.dragging { cursor: pointer; cursor: hand; } } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; &:before, &:after { content: ""; display: table; } &:after { clear: both; } .slick-loading & { visibility: hidden; } } .slick-slide { float: left; height: 100%; min-height: 1px; [dir="rtl"] & { float: right; } img { display: block; } &.slick-loading img { display: none; } display: none; &.dragging img { pointer-events: none; } .slick-initialized & { display: block; } .slick-loading & { visibility: hidden; } .slick-vertical & { display: block; height: auto; border: 1px solid transparent; } } .slick-arrow.slick-hidden { display: none; } .slick-next { height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; border:none; position:absolute; top: 100%; left: 50% !important; -webkit-transform: translate(50%, 100%); -ms-transform: translate(50%, 100%); transform: translate(50%, 100%); &:before { font-size:30px; line-height:20px; color:#000; font-family:Fontawesome; } } .slick-prev { height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; border:none; position:absolute; top: 100%; left: 50% !important; -webkit-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); transform: translate(-50%, 100%); &:before { font-size:30px; line-height:20px; color:#000; font-family:Fontawesome; } } .slick-prev { left:0; &:before { content:"\f104"; } } .slick-next { right:0; &:before { content:"\f105"; } } /* Dots */ .slick-dotted .slick-slider { margin-bottom: 30px; } .slick-dots { width:100%; position:absolute; display:block; margin:0; padding:0; bottom:-30px; list-style:none; text-align:center; z-index:100; li { height:20px; width:20px; position:relative; display:inline-block; margin:0 5px; padding:0; cursor:pointer; &.slick-active, &:hover { button { background:@primair; border:1px solid @primair; } } button { height:16px; width:15px; display:block; line-height:0px; font-size:0px; cursor:pointer; border-radius:20px; -webkit-border-radius:20px; background:none; border:1px solid @primair; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } } }