owl.carousel.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /*
  2. * Core Owl Carousel CSS File
  3. * v1.3.3
  4. */
  5. /* clearfix */
  6. .owl-carousel .owl-wrapper:after {
  7. content: ".";
  8. display: block;
  9. clear: both;
  10. visibility: hidden;
  11. line-height: 0;
  12. height: 0;
  13. }
  14. /* display none until init */
  15. .owl-carousel{
  16. display: none;
  17. position: relative;
  18. width: 100%;
  19. -ms-touch-action: pan-y;
  20. }
  21. .owl-carousel .owl-wrapper{
  22. display: none;
  23. position: relative;
  24. -webkit-transform: translate3d(0px, 0px, 0px);
  25. }
  26. .owl-carousel .owl-wrapper-outer{
  27. overflow: hidden;
  28. position: relative;
  29. width: 100%;
  30. }
  31. .owl-carousel .owl-wrapper-outer.autoHeight{
  32. -webkit-transition: height 500ms ease-in-out;
  33. -moz-transition: height 500ms ease-in-out;
  34. -ms-transition: height 500ms ease-in-out;
  35. -o-transition: height 500ms ease-in-out;
  36. transition: height 500ms ease-in-out;
  37. }
  38. .owl-carousel .owl-item{
  39. float: left;
  40. }
  41. .owl-controls .owl-page,
  42. .owl-controls .owl-buttons div{
  43. cursor: pointer;
  44. }
  45. .owl-controls {
  46. -webkit-user-select: none;
  47. -khtml-user-select: none;
  48. -moz-user-select: none;
  49. -ms-user-select: none;
  50. user-select: none;
  51. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  52. }
  53. /* mouse grab icon */
  54. .grabbing {
  55. cursor:url(grabbing.png) 8 8, move;
  56. }
  57. /* fix */
  58. .owl-carousel .owl-wrapper,
  59. .owl-carousel .owl-item{
  60. -webkit-backface-visibility: hidden;
  61. -moz-backface-visibility: hidden;
  62. -ms-backface-visibility: hidden;
  63. -webkit-transform: translate3d(0,0,0);
  64. -moz-transform: translate3d(0,0,0);
  65. -ms-transform: translate3d(0,0,0);
  66. }
  67. /* Feel free to change duration */
  68. .animated {
  69. -webkit-animation-duration : 1000 ms ;
  70. animation-duration : 1000 ms ;
  71. -webkit-animation-fill-mode : both ;
  72. animation-fill-mode : both ;
  73. }
  74. /* .owl-animated-out - only for current item */
  75. /* This is very important class. Use z-index if you want move Out item above In item */
  76. .owl-animated-out {
  77. z-index : 1
  78. }
  79. /* .owl-animated-in - only for upcoming item
  80. /* This is very important class. Use z-index if you want move In item above Out item */
  81. .owl-animated-in {
  82. z-index : 0
  83. }
  84. /* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */
  85. .fadeOut {
  86. -webkit-animation-name : fadeOut ;
  87. animation-name : fadeOut ;
  88. }
  89. @-webkit-keyframes fadeOut {
  90. 0% {
  91. opacity : 1 ;
  92. }
  93. 100% {
  94. opacity : 0 ;
  95. }
  96. }
  97. @keyframes fadeOut {
  98. 0% {
  99. opacity : 1 ;
  100. }
  101. 100% {
  102. opacity : 0 ;
  103. }
  104. }
  105. #owl-demo .item img {
  106. display: block;
  107. width: 100%;
  108. height: auto;
  109. }
  110. .owl-theme .owl-controls {
  111. position: relative;
  112. }
  113. .owl-theme .owl-controls .item-link {
  114. position: relative;
  115. display: block;
  116. width: 100px;
  117. height: 70px;
  118. margin: 0 2px;
  119. border-bottom: 4px solid #ccc;
  120. outline: none;
  121. }
  122. .owl-theme .owl-controls .item-link:focus {
  123. -webkit-box-shadow: 0 0 8px #3498DB;
  124. -moz-box-shadow: 0 0 8px #3498DB;
  125. box-shadow: 0 0 8px #3498DB;
  126. outline: none;
  127. }
  128. .owl-theme .owl-controls .active .item-link {
  129. border-bottom: 4px solid #3498DB;
  130. }
  131. .owl-theme .owl-controls .owl-page span {
  132. display: none;
  133. }
  134. .owl-theme .prev-owl,
  135. .owl-theme .next-owl {
  136. display: none;
  137. }
  138. .owl-theme .prev-owl:focus,
  139. .owl-theme .next-owl:focus {
  140. -webkit-box-shadow: 0 0 8px #3498DB;
  141. -moz-box-shadow: 0 0 8px #3498DB;
  142. box-shadow: 0 0 8px #3498DB;
  143. }
  144. .owl-theme .prev-owl {
  145. left: 24px;
  146. }
  147. .owl-theme .next-owl {
  148. right: 24px;
  149. }