owl.carousel.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. /*
  2. * Owl Carousel - Core
  3. */
  4. .owl-carousel {
  5. display: none;
  6. width: 100%;
  7. -webkit-tap-highlight-color: transparent;
  8. /* position relative and z-index fix webkit rendering fonts issue */
  9. position: relative;
  10. z-index: 1;
  11. }
  12. .owl-carousel .owl-stage {
  13. position: relative;
  14. -ms-touch-action: pan-Y;
  15. touch-action: manipulation;
  16. -moz-backface-visibility: hidden;
  17. /* fix firefox animation glitch */
  18. }
  19. .owl-carousel .owl-stage:after {
  20. content: ".";
  21. display: block;
  22. clear: both;
  23. visibility: hidden;
  24. line-height: 0;
  25. height: 0;
  26. }
  27. .owl-carousel .owl-stage-outer {
  28. position: relative;
  29. overflow: hidden;
  30. /* fix for flashing background */
  31. -webkit-transform: translate3d(0px, 0px, 0px);
  32. }
  33. .owl-carousel .owl-wrapper,
  34. .owl-carousel .owl-item {
  35. -webkit-backface-visibility: hidden;
  36. -moz-backface-visibility: hidden;
  37. -ms-backface-visibility: hidden;
  38. -webkit-transform: translate3d(0, 0, 0);
  39. -moz-transform: translate3d(0, 0, 0);
  40. -ms-transform: translate3d(0, 0, 0);
  41. }
  42. .owl-carousel .owl-item {
  43. position: relative;
  44. min-height: 1px;
  45. float: left;
  46. -webkit-backface-visibility: hidden;
  47. -webkit-tap-highlight-color: transparent;
  48. -webkit-touch-callout: none;
  49. }
  50. .owl-carousel .owl-item img {
  51. display: block;
  52. width: 100%;
  53. }
  54. .owl-carousel .owl-nav.disabled,
  55. .owl-carousel .owl-dots.disabled {
  56. display: none;
  57. }
  58. .owl-carousel .owl-nav .owl-prev,
  59. .owl-carousel .owl-nav .owl-next,
  60. .owl-carousel .owl-dot {
  61. cursor: pointer;
  62. -webkit-user-select: none;
  63. -khtml-user-select: none;
  64. -moz-user-select: none;
  65. -ms-user-select: none;
  66. user-select: none;
  67. }
  68. .owl-carousel .owl-nav button.owl-prev,
  69. .owl-carousel .owl-nav button.owl-next,
  70. .owl-carousel button.owl-dot {
  71. background: none;
  72. color: inherit;
  73. border: none;
  74. padding: 0 !important;
  75. font: inherit;
  76. }
  77. .owl-carousel.owl-loaded {
  78. display: block;
  79. }
  80. .owl-carousel.owl-loading {
  81. opacity: 0;
  82. display: block;
  83. }
  84. .owl-carousel.owl-hidden {
  85. opacity: 0;
  86. }
  87. .owl-carousel.owl-refresh .owl-item {
  88. visibility: hidden;
  89. }
  90. .owl-carousel.owl-drag .owl-item {
  91. -ms-touch-action: pan-y;
  92. touch-action: pan-y;
  93. -webkit-user-select: none;
  94. -moz-user-select: none;
  95. -ms-user-select: none;
  96. user-select: none;
  97. }
  98. .owl-carousel.owl-grab {
  99. cursor: move;
  100. cursor: grab;
  101. }
  102. .owl-carousel.owl-rtl {
  103. direction: rtl;
  104. }
  105. .owl-carousel.owl-rtl .owl-item {
  106. float: right;
  107. }
  108. /* No Js */
  109. .no-js .owl-carousel {
  110. display: block;
  111. }
  112. /*
  113. * Owl Carousel - Animate Plugin
  114. */
  115. .owl-carousel .animated {
  116. animation-duration: 1000ms;
  117. animation-fill-mode: both;
  118. }
  119. .owl-carousel .owl-animated-in {
  120. z-index: 0;
  121. }
  122. .owl-carousel .owl-animated-out {
  123. z-index: 1;
  124. }
  125. .owl-carousel .fadeOut {
  126. animation-name: fadeOut;
  127. }
  128. @keyframes fadeOut {
  129. 0% {
  130. opacity: 1;
  131. }
  132. 100% {
  133. opacity: 0;
  134. }
  135. }
  136. /*
  137. * Owl Carousel - Auto Height Plugin
  138. */
  139. .owl-height {
  140. transition: height 500ms ease-in-out;
  141. }
  142. /*
  143. * Owl Carousel - Lazy Load Plugin
  144. */
  145. .owl-carousel .owl-item {
  146. /**
  147. This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  148. calculation of the height of the owl-item that breaks page layouts
  149. */
  150. }
  151. .owl-carousel .owl-item .owl-lazy {
  152. opacity: 0;
  153. transition: opacity 400ms ease;
  154. }
  155. .owl-carousel .owl-item .owl-lazy[src^=""],
  156. .owl-carousel .owl-item .owl-lazy:not([src]) {
  157. max-height: 0;
  158. }
  159. .owl-carousel .owl-item img.owl-lazy {
  160. transform-style: preserve-3d;
  161. }
  162. /*
  163. * Owl Carousel - Video Plugin
  164. */
  165. .owl-carousel .owl-video-wrapper {
  166. position: relative;
  167. height: 100%;
  168. background: #000;
  169. }
  170. .owl-carousel .owl-video-play-icon {
  171. position: absolute;
  172. height: 80px;
  173. width: 80px;
  174. left: 50%;
  175. top: 50%;
  176. margin-left: -40px;
  177. margin-top: -40px;
  178. background: url("owl.video.play.png") no-repeat;
  179. cursor: pointer;
  180. z-index: 1;
  181. -webkit-backface-visibility: hidden;
  182. transition: transform 100ms ease;
  183. }
  184. .owl-carousel .owl-video-play-icon:hover {
  185. -ms-transform: scale(1.3, 1.3);
  186. transform: scale(1.3, 1.3);
  187. }
  188. .owl-carousel .owl-video-playing .owl-video-tn,
  189. .owl-carousel .owl-video-playing .owl-video-play-icon {
  190. display: none;
  191. }
  192. .owl-carousel .owl-video-tn {
  193. opacity: 0;
  194. height: 100%;
  195. background-position: center center;
  196. background-repeat: no-repeat;
  197. background-size: contain;
  198. transition: opacity 400ms ease;
  199. }
  200. .owl-carousel .owl-video-frame {
  201. position: relative;
  202. z-index: 1;
  203. height: 100%;
  204. width: 100%;
  205. }