jquery.bxslider.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /**
  2. * BxSlider v4.0 - Fully loaded, responsive content slider
  3. * http://bxslider.com
  4. *
  5. * Written by: Steven Wanderski, 2012
  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. padding: 0;
  17. *zoom: 1;
  18. }
  19. .bx-wrapper img {
  20. /* max-width: 100%;*/
  21. width:100%;
  22. display: block;
  23. }
  24. /** THEME
  25. ===================================*/
  26. .bx-wrapper .bx-viewport {
  27. /*-moz-box-shadow: 0 0 5px #ccc;
  28. -webkit-box-shadow: 0 0 5px #ccc;*/
  29. background: #fff;
  30. }
  31. .bx-wrapper .bx-pager,
  32. .bx-wrapper .bx-controls-auto {
  33. position: absolute;
  34. /*bottom:3vmin;*/
  35. bottom:67px;
  36. width: 100%;
  37. z-index:1;
  38. }
  39. /* LOADER */
  40. .bx-wrapper .bx-loading {
  41. min-height: 50px;
  42. /*background: url(../images/bx_loader.gif) center center no-repeat #fff;*/
  43. height: 100%;
  44. width: 100%;
  45. position: absolute;
  46. top: 0;
  47. left: 0;
  48. z-index: 2000;
  49. }
  50. /* PAGER */
  51. .bx-wrapper .bx-pager {
  52. text-align: center;
  53. font-size: .85em;
  54. font-family: Arial;
  55. font-weight: bold;
  56. color: #666;
  57. }
  58. .bx-wrapper .bx-pager .bx-pager-item,
  59. .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  60. display: inline-block;
  61. *zoom: 1;
  62. *display: inline;
  63. }
  64. .bx-wrapper .bx-pager.bx-default-pager a {
  65. background: #fff;
  66. text-indent: -9999px;
  67. display: block;
  68. width: 1.7vmin;
  69. height:1.7vmin;
  70. margin: 0 1vmin;
  71. outline: 0;
  72. -moz-border-radius: 100%;
  73. -webkit-border-radius: 100%;
  74. border-radius: 100%;
  75. }
  76. .bx-wrapper .bx-pager.bx-default-pager a:hover,
  77. .bx-wrapper .bx-pager.bx-default-pager a.active {
  78. background: #72e9f7;
  79. }
  80. /* DIRECTION CONTROLS (NEXT / PREV) */
  81. .bx-wrapper .bx-prev {
  82. left: 10px;
  83. background: url(images/controls.png) no-repeat 0 -32px;
  84. }
  85. .bx-wrapper .bx-next {
  86. right: 10px;
  87. background: url(images/controls.png) no-repeat -43px -32px;
  88. }
  89. .bx-wrapper .bx-prev:hover {
  90. background-position: 0 0;
  91. }
  92. .bx-wrapper .bx-next:hover {
  93. background-position: -43px 0;
  94. }
  95. .bx-wrapper .bx-controls-direction a {
  96. position: absolute;
  97. top: 50%;
  98. margin-top: -16px;
  99. outline: 0;
  100. width: 32px;
  101. height: 32px;
  102. text-indent: -9999px;
  103. z-index: 9999;
  104. }
  105. .bx-wrapper .bx-controls-direction a.disabled {
  106. display: none;
  107. }
  108. /* AUTO CONTROLS (START / STOP) */
  109. .bx-wrapper .bx-controls-auto {
  110. text-align: center;
  111. }
  112. .bx-wrapper .bx-controls-auto .bx-start {
  113. display: block;
  114. text-indent: -9999px;
  115. width: 10px;
  116. height: 11px;
  117. outline: 0;
  118. background: url(images/controls.png) -86px -11px no-repeat;
  119. margin: 0 3px;
  120. }
  121. .bx-wrapper .bx-controls-auto .bx-start:hover,
  122. .bx-wrapper .bx-controls-auto .bx-start.active {
  123. background-position: -86px 0;
  124. }
  125. .bx-wrapper .bx-controls-auto .bx-stop {
  126. display: block;
  127. text-indent: -9999px;
  128. width: 9px;
  129. height: 11px;
  130. outline: 0;
  131. background: url(images/controls.png) -86px -44px no-repeat;
  132. margin: 0 3px;
  133. }
  134. .bx-wrapper .bx-controls-auto .bx-stop:hover,
  135. .bx-wrapper .bx-controls-auto .bx-stop.active {
  136. background-position: -86px -33px;
  137. }
  138. /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
  139. .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  140. text-align: left;
  141. width: 80%;
  142. }
  143. .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  144. right: 0;
  145. width: 35px;
  146. }
  147. /* IMAGE CAPTIONS */
  148. .bx-wrapper .bx-caption {
  149. position: absolute;
  150. bottom: 0;
  151. left: 0;
  152. height:30px;
  153. line-height:30px;
  154. text-align:center;
  155. background: url(../images/banner_title_bg.png) repeat center;
  156. width: 100%;
  157. }
  158. .bx-wrapper .bx-caption span {
  159. color: #fff;
  160. display: block;
  161. font-size:16px;
  162. }