owl.carousel.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. /*
  68. * Owl Carousel Owl Demo Theme
  69. * v1.3.3
  70. */
  71. .owl-theme .owl-controls{
  72. margin-top: 10px;
  73. text-align: center;
  74. }
  75. /* Styling Next and Prev buttons */
  76. .owl-theme .owl-controls .owl-buttons div{
  77. background-image: url("../images/bg_direction_nav2.png");
  78. background-repeat: no-repeat;
  79. cursor: pointer;
  80. display: block;
  81. height: 58px;
  82. margin: -29px 0 0;
  83. position: absolute;
  84. text-indent: -9999px;
  85. top: 50%;
  86. width: 28px;
  87. z-index: 10;
  88. }
  89. .owl-carousel{overflow:hidden}
  90. .owl-theme .owl-controls .owl-buttons div.owl-prev{
  91. background-position: 0 0;
  92. left: -50px;
  93. }
  94. .owl-theme .owl-controls .owl-buttons div.owl-next{
  95. background-position: -28px 0;
  96. right: -50px;
  97. }
  98. .owl-theme:hover .owl-controls .owl-buttons div.owl-prev{left:0}
  99. .owl-theme:hover .owl-controls .owl-buttons div.owl-next{right:0}
  100. .owl-pagination{margin-top:-40px;}
  101. /* Clickable class fix problem with hover on touch devices */
  102. /* Use it for non-touch hover action */
  103. .owl-theme .owl-controls.clickable .owl-buttons div:hover{
  104. filter: Alpha(Opacity=100);/*IE7 fix*/
  105. opacity: 1;
  106. text-decoration: none;
  107. }
  108. /* Styling Pagination*/
  109. .owl-theme .owl-controls .owl-page{
  110. display: inline-block;
  111. zoom: 1;
  112. *display: inline;/*IE7 life-saver */
  113. }
  114. .owl-theme .owl-controls .owl-page span{
  115. display: block;
  116. width: 14px;
  117. height: 14px;
  118. margin: 5px 7px;
  119. filter: Alpha(Opacity=50);/*IE7 fix*/
  120. opacity: 0.5;
  121. -webkit-border-radius: 20px;
  122. -moz-border-radius: 20px;
  123. border-radius: 20px;
  124. background: #aaa;
  125. }
  126. .owl-theme .owl-controls .owl-page.active span,
  127. .owl-theme .owl-controls.clickable .owl-page:hover span{
  128. background: #fff;
  129. width: 14px;
  130. height: 14px;
  131. }
  132. /* If PaginationNumbers is true */
  133. .owl-theme .owl-controls .owl-page span.owl-numbers{
  134. height: auto;
  135. width: auto;
  136. color: #FFF;
  137. padding: 2px 10px;
  138. font-size: 12px;
  139. -webkit-border-radius: 30px;
  140. -moz-border-radius: 30px;
  141. border-radius: 30px;
  142. }
  143. /* preloading images */
  144. .owl-item.loading{
  145. min-height: 100px;
  146. background: url(../images/AjaxLoader.gif) no-repeat center center
  147. }