slick.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. /* Slider */
  2. .slick-slider {
  3. position: relative;
  4. display: block;
  5. box-sizing: border-box;
  6. -webkit-user-select: none;
  7. -moz-user-select: none;
  8. -ms-user-select: none;
  9. user-select: none;
  10. -webkit-touch-callout: none;
  11. -khtml-user-select: none;
  12. -ms-touch-action: pan-y;
  13. touch-action: pan-y;
  14. -webkit-tap-highlight-color: transparent;
  15. }
  16. .slick-list {
  17. position: relative;
  18. display: block;
  19. overflow: hidden;
  20. margin: 0;
  21. padding: 0;
  22. }
  23. .slick-list:focus {
  24. outline: none;
  25. }
  26. .slick-list.dragging {
  27. cursor: pointer;
  28. cursor: hand;
  29. }
  30. .slick-slider .slick-track,
  31. .slick-slider .slick-list {
  32. -webkit-transform: translate3d(0, 0, 0);
  33. -moz-transform: translate3d(0, 0, 0);
  34. -ms-transform: translate3d(0, 0, 0);
  35. -o-transform: translate3d(0, 0, 0);
  36. transform: translate3d(0, 0, 0);
  37. }
  38. .slick-track {
  39. position: relative;
  40. top: 0;
  41. left: 0;
  42. display: block;
  43. margin-left: auto;
  44. margin-right: auto;
  45. }
  46. .slick-track:before,
  47. .slick-track:after {
  48. display: table;
  49. content: "";
  50. }
  51. .slick-track:after {
  52. clear: both;
  53. }
  54. .slick-loading .slick-track {
  55. visibility: hidden;
  56. }
  57. .slick-slide {
  58. display: none;
  59. float: left;
  60. height: 100%;
  61. min-height: 1px;
  62. }
  63. [dir="rtl"] .slick-slide {
  64. float: right;
  65. }
  66. .slick-slide img {
  67. display: block;
  68. }
  69. .slick-slide.slick-loading img {
  70. display: none;
  71. }
  72. .slick-slide.dragging img {
  73. pointer-events: none;
  74. }
  75. .slick-initialized .slick-slide {
  76. display: block;
  77. }
  78. .slick-loading .slick-slide {
  79. visibility: hidden;
  80. }
  81. .slick-vertical .slick-slide {
  82. display: block;
  83. height: auto;
  84. border: 1px solid transparent;
  85. }
  86. .slick-arrow.slick-hidden {
  87. display: none;
  88. }
  89. /* Slider */
  90. .slick-loading .slick-list {
  91. background: #fff url("./ajax-loader.gif") center center no-repeat;
  92. }
  93. /* Icons */
  94. @font-face {
  95. font-family: "slick";
  96. font-weight: normal;
  97. font-style: normal;
  98. src: url("./fonts/slick.eot");
  99. src:
  100. url("./fonts/slick.eot?#iefix") format("embedded-opentype"),
  101. url("./fonts/slick.woff") format("woff"),
  102. url("./fonts/slick.ttf") format("truetype"),
  103. url("./fonts/slick.svg#slick") format("svg");
  104. }
  105. /* Arrows */
  106. .slick-prev,
  107. .slick-next {
  108. font-size: 0;
  109. line-height: 0;
  110. position: absolute;
  111. top: 50%;
  112. display: block;
  113. width: 20px;
  114. height: 20px;
  115. padding: 0;
  116. -webkit-transform: translate(0, -50%);
  117. -ms-transform: translate(0, -50%);
  118. transform: translate(0, -50%);
  119. cursor: pointer;
  120. color: transparent;
  121. border: none;
  122. outline: none;
  123. background: transparent;
  124. }
  125. .slick-prev:hover,
  126. .slick-prev:focus,
  127. .slick-next:hover,
  128. .slick-next:focus {
  129. color: transparent;
  130. outline: none;
  131. background: transparent;
  132. }
  133. .slick-prev:hover:before,
  134. .slick-prev:focus:before,
  135. .slick-next:hover:before,
  136. .slick-next:focus:before {
  137. opacity: 1;
  138. }
  139. .slick-prev.slick-disabled:before,
  140. .slick-next.slick-disabled:before {
  141. opacity: 0.25;
  142. }
  143. .slick-prev:before,
  144. .slick-next:before {
  145. font-family: "slick";
  146. font-size: 20px;
  147. line-height: 1;
  148. opacity: 0.75;
  149. color: white;
  150. -webkit-font-smoothing: antialiased;
  151. -moz-osx-font-smoothing: grayscale;
  152. }
  153. .slick-prev {
  154. left: -25px;
  155. }
  156. [dir="rtl"] .slick-prev {
  157. right: -25px;
  158. left: auto;
  159. }
  160. .slick-prev:before {
  161. content: "←";
  162. }
  163. [dir="rtl"] .slick-prev:before {
  164. content: "→";
  165. }
  166. .slick-next {
  167. right: -25px;
  168. }
  169. [dir="rtl"] .slick-next {
  170. right: auto;
  171. left: -25px;
  172. }
  173. .slick-next:before {
  174. content: "→";
  175. }
  176. [dir="rtl"] .slick-next:before {
  177. content: "←";
  178. }
  179. .slick-dotted.slick-slider {
  180. margin-bottom: 30px;
  181. }
  182. .slick-dots {
  183. position: absolute;
  184. bottom: -25px;
  185. display: block;
  186. width: 100%;
  187. padding: 0;
  188. margin: 0;
  189. list-style: none;
  190. text-align: center;
  191. }
  192. .slick-dots li {
  193. position: relative;
  194. display: inline-block;
  195. width: 20px;
  196. height: 20px;
  197. margin: 0 5px;
  198. padding: 0;
  199. cursor: pointer;
  200. }
  201. .slick-dots li button {
  202. font-size: 0;
  203. line-height: 0;
  204. display: block;
  205. width: 20px;
  206. height: 20px;
  207. padding: 5px;
  208. cursor: pointer;
  209. color: transparent;
  210. border: 0;
  211. outline: none;
  212. background: transparent;
  213. }
  214. .slick-dots li button:hover,
  215. .slick-dots li button:focus {
  216. outline: none;
  217. }
  218. .slick-dots li button:hover:before,
  219. .slick-dots li button:focus:before {
  220. opacity: 1;
  221. }
  222. .slick-dots li button:before {
  223. font-family: "slick";
  224. font-size: 6px;
  225. line-height: 20px;
  226. position: absolute;
  227. top: 0;
  228. left: 0;
  229. width: 20px;
  230. height: 20px;
  231. content: "•";
  232. text-align: center;
  233. opacity: 0.25;
  234. color: black;
  235. -webkit-font-smoothing: antialiased;
  236. -moz-osx-font-smoothing: grayscale;
  237. }
  238. .slick-dots li.slick-active button:before {
  239. opacity: 0.75;
  240. color: black;
  241. }