/* 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; &:before, &:after { content: ""; display: table; } &:after { clear: both; } .slick-loading & { visibility: hidden; } } .slick-slide { float: left; // height: 100%; min-height: 1px; img { display: block; margin: 0 auto; // width: 100%; } &.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; } .arw { position: absolute; top: 50%; transform:translate(0,-50%); z-index: 9; font-size: rem(52); &:hover { cursor: pointer; } &.right { right: 0; margin-top: 4px; } &.left{ left: 0; &:before{ transform:rotate(180deg);display: block; } } } .arw-btm{ position: absolute; bottom: 10px;right:20px; z-index: 9; font-size: 12px;text-align: center; background: darken(desaturate($primary, 0.27), 5.29); border:darken(saturate(adjust-hue($primary, 4), 0.92), 8.04) 1px solid; width: 28px;height: 28px;border-radius: 50%; display: block; color: $light; &:before{ line-height: 26px;display:block; } &.left{ right:55px; &:before{ padding-right: 1px; } } &.right{ transform: rotate(180deg); &:before{ padding-right: 2px; } } } .slick-disabled:before {opacity: 0.4 !important;} .slick-dots{ margin: 20px 0 0;text-align: center; li{ display: inline-block;padding: 0 5px; button{ background-color: $light; width:9px;height: 9px; border-radius: 100%; text-indent: -9999px; border:0;padding: 0;margin: 0; opacity: 0.5; } &.slick-active{ button{ opacity: 1; } } } .light-dots &{ .button{ background-color: $light; } } } html[dir="rtl"] { .slick-slide { direction: ltr; } } .slick-arrow{ position: absolute; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;outline: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #91a7c1; bottom: -40px; display: flex; justify-content: center; align-items: center; z-index: 1; &:before{ content: ""; display: block; width:rem(8);height:rem(8); transform: rotate(45deg); } &.slick-prev{ left:50%; margin-left: -25px; transform: translateX(-50%); &:before{ border-left:#91a7c1 2px solid; border-bottom:#91a7c1 2px solid; left: 2px; position: relative; } } &.slick-next{ left:50%; margin-left: 25px; transform: translateX(-50%); &:before{ border-right:#91a7c1 2px solid; border-top:#91a7c1 2px solid; right: 2px; position: relative; } } &:focus,&:active{ outline: 0; } &.slick-disabled{ border: 1px solid #b9c2cd; } } .slick-dots{ padding: 0; margin: 0; list-style: none; text-align: center; position: absolute; width: 100%; bottom: 15px; left: 0; z-index: 1000; button{ width: 8px;height: 8px; background: #fff;border-radius: 50%; border:#ccc 1px solid; display: block;font-size: 0;text-indent: -9999px;overflow: hidden; padding: 0; bottom: 8px; left: 0; transition: all ease .5s; &:focus,&:hover{ outline: 0; } } li{ list-style: none;display: inline-block;vertical-align: middle; padding: 5px; &.slick-active{ button{background: $primary!important;border-color:$primary;transform:scale(1.2) } } } } [dir='rtl'] .slick-slide { float: left; } .slick-slider .slick-track, .slick-slider .slick-list { direction: ltr; }