jquery.bxslider.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. /**
  2. * BxSlider v4.1.2 - Fully loaded, responsive content slider
  3. * http://bxslider.com
  4. *
  5. * Written by: Steven Wanderski, 2014
  6. * http://stevenwanderski.com
  7. * (while drinking Belgian ales and listening to jazz)
  8. *
  9. * CEO and founder of bxCreative, LTD
  10. * http://bxcreative.com
  11. */
  12. /** RESET AND LAYOUT
  13. ===================================*/
  14. .bx-wrapper {
  15. position: relative;
  16. margin: 0 auto;
  17. padding: 0;
  18. *zoom: 1;
  19. }
  20. .bx-wrapper img {
  21. max-width: 100%;
  22. display: block;
  23. }
  24. /** THEME
  25. ===================================*/
  26. .bx-wrapper .bx-viewport {
  27. left: 0px;
  28. background: #fff;
  29. /*fix other elements on the page moving (on Chrome)*/
  30. -webkit-transform: translatez(0);
  31. -moz-transform: translatez(0);
  32. -ms-transform: translatez(0);
  33. -o-transform: translatez(0);
  34. transform: translatez(0);
  35. }
  36. .bx-wrapper .bx-pager,
  37. .bx-wrapper .bx-controls-auto {
  38. position: absolute;
  39. bottom: 26px;
  40. width: 100%;
  41. }
  42. /* LOADER */
  43. .bx-wrapper .bx-loading {
  44. min-height: 50px;
  45. background: url(../images/bx_loader.gif) center center no-repeat #fff;
  46. height: 100%;
  47. width: 100%;
  48. position: absolute;
  49. top: 0;
  50. left: 0;
  51. z-index: 2000;
  52. }
  53. /* PAGER */
  54. .bx-wrapper .bx-pager {
  55. text-align: center;
  56. font-size: .85em;
  57. font-family: Arial;
  58. font-weight: bold;
  59. color: #666;
  60. padding-top: 20px;
  61. width: 100%;
  62. }
  63. .bx-wrapper .bx-pager .bx-pager-item,
  64. .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  65. display: inline-block;
  66. *zoom: 1;
  67. *display: inline;
  68. }
  69. .bx-wrapper .bx-pager.bx-default-pager a {
  70. background: transparent;
  71. text-indent: -9999px;
  72. display: block;
  73. width: 8px;
  74. height: 8px;
  75. border: 2px solid rgba(255,255,255,0.5);
  76. margin: 0 4px;
  77. outline: 0;
  78. -moz-border-radius: 50%;
  79. -webkit-border-radius: 50%;
  80. border-radius: 50%;
  81. }
  82. .bx-wrapper .bx-pager.bx-default-pager a:hover,
  83. .bx-wrapper .bx-pager.bx-default-pager a.active {
  84. background: #fff;
  85. border: 2px solid rgba(255,255,255,1);
  86. }
  87. /* DIRECTION CONTROLS (NEXT / PREV) */
  88. .bx-controls-direction {
  89. position: inherit;
  90. top: 0;
  91. left: 0;
  92. text-align: center;
  93. height: 100%;
  94. }
  95. .bx-wrapper .bx-prev {
  96. width: 30px;
  97. left: 0px;
  98. height: 100%;
  99. background: rgba(51,51,51,0.5);
  100. transition: all 0.20s ease-in-out;
  101. -moz-transition: all 0.20s ease-in-out;
  102. -webkit-transition: all 0.20s ease-in-out;
  103. -o-transition: all 0.20s ease-in-out;
  104. }
  105. .bx-wrapper .bx-prev:before {
  106. content: '\f104';
  107. font-family: 'FontAwesome';
  108. position: absolute;
  109. top: 50%;
  110. margin-top: -15px;
  111. left: 50%;
  112. margin-left: -5px;
  113. text-indent: 0 !important;
  114. font-size: 30px;
  115. color: #fff;
  116. transition: all 0.20s ease-in-out;
  117. -moz-transition: all 0.20s ease-in-out;
  118. -webkit-transition: all 0.20s ease-in-out;
  119. -o-transition: all 0.20s ease-in-out;
  120. }
  121. .bx-wrapper .bx-next {
  122. width: 30px;
  123. height: 100%;
  124. background: rgba(51,51,51,0.5);
  125. right: 0;
  126. transition: all 0.20s ease-in-out;
  127. -moz-transition: all 0.20s ease-in-out;
  128. -webkit-transition: all 0.20s ease-in-out;
  129. -o-transition: all 0.20s ease-in-out;
  130. }
  131. .bx-wrapper .bx-next:before {
  132. content: '\f105';
  133. font-family: 'FontAwesome';
  134. position: absolute;
  135. top: 50%;
  136. margin-top: -15px;
  137. left: 50%;
  138. margin-left: -5px;
  139. text-indent: 0 !important;
  140. font-size: 30px;
  141. color: #fff;
  142. transition: all 0.20s ease-in-out;
  143. -moz-transition: all 0.20s ease-in-out;
  144. -webkit-transition: all 0.20s ease-in-out;
  145. -o-transition: all 0.20s ease-in-out;
  146. }
  147. .bx-wrapper .bx-controls-direction a {
  148. position: absolute;
  149. top: 0;
  150. outline: 0;
  151. text-indent: -9999px;
  152. z-index: 9999;
  153. }
  154. .bx-wrapper .bx-controls-direction a.disabled {
  155. display: none;
  156. }
  157. /* AUTO CONTROLS (START / STOP) */
  158. .bx-wrapper .bx-controls-auto {
  159. text-align: center;
  160. }
  161. .bx-wrapper .bx-controls-auto .bx-start {
  162. display: block;
  163. text-indent: -9999px;
  164. width: 10px;
  165. height: 11px;
  166. outline: 0;
  167. /*background: url(images/controls.png) -86px -11px no-repeat;*/
  168. margin: 0 3px;
  169. }
  170. .bx-wrapper .bx-controls-auto .bx-start:hover,
  171. .bx-wrapper .bx-controls-auto .bx-start.active {
  172. background-position: -86px 0;
  173. }
  174. .bx-wrapper .bx-controls-auto .bx-stop {
  175. display: block;
  176. text-indent: -9999px;
  177. width: 9px;
  178. height: 11px;
  179. outline: 0;
  180. /*background: url(images/controls.png) -86px -44px no-repeat;*/
  181. margin: 0 3px;
  182. }
  183. .bx-wrapper .bx-controls-auto .bx-stop:hover,
  184. .bx-wrapper .bx-controls-auto .bx-stop.active {
  185. background-position: -86px -33px;
  186. }
  187. /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
  188. .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  189. text-align: left;
  190. width: 80%;
  191. }
  192. .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  193. right: 0;
  194. width: 35px;
  195. }
  196. /* IMAGE CAPTIONS */
  197. .bx-wrapper .bx-caption {
  198. position: absolute;
  199. bottom: 0;
  200. left: 0;
  201. background: #666\9;
  202. background: rgba(80, 80, 80, 0.75);
  203. width: 100%;
  204. }
  205. .bx-wrapper .bx-caption span {
  206. color: #fff;
  207. font-family: Arial;
  208. display: block;
  209. font-size: .85em;
  210. padding: 10px;
  211. }