swiper.min.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /*
  2. * Swiper 2.7.6
  3. * Mobile touch slider and framework with hardware accelerated transitions
  4. *
  5. * http://www.idangero.us/sliders/swiper/
  6. *
  7. * Copyright 2010-2015, Vladimir Kharlampidi
  8. * The iDangero.us
  9. * http://www.idangero.us/
  10. *
  11. * Licensed under GPL & MIT
  12. *
  13. * Released on: February 11, 2015
  14. */
  15. /* ===============================================================
  16. Basic Swiper Styles
  17. ================================================================*/
  18. .swiper-container {
  19. margin:0 auto;
  20. position:relative;
  21. overflow:hidden;
  22. direction:ltr;
  23. -webkit-backface-visibility:hidden;
  24. -moz-backface-visibility:hidden;
  25. -ms-backface-visibility:hidden;
  26. -o-backface-visibility:hidden;
  27. backface-visibility:hidden;
  28. /* Fix of Webkit flickering */
  29. z-index:1;
  30. }
  31. .swiper-wrapper {
  32. position:relative;
  33. width:100%;
  34. -webkit-transition-property:-webkit-transform, left, top;
  35. -webkit-transition-duration:0s;
  36. -webkit-transform:translate3d(0px,0,0);
  37. -webkit-transition-timing-function:ease;
  38. -moz-transition-property:-moz-transform, left, top;
  39. -moz-transition-duration:0s;
  40. -moz-transform:translate3d(0px,0,0);
  41. -moz-transition-timing-function:ease;
  42. -o-transition-property:-o-transform, left, top;
  43. -o-transition-duration:0s;
  44. -o-transform:translate3d(0px,0,0);
  45. -o-transition-timing-function:ease;
  46. -o-transform:translate(0px,0px);
  47. -ms-transition-property:-ms-transform, left, top;
  48. -ms-transition-duration:0s;
  49. -ms-transform:translate3d(0px,0,0);
  50. -ms-transition-timing-function:ease;
  51. transition-property:transform, left, top;
  52. transition-duration:0s;
  53. transform:translate3d(0px,0,0);
  54. transition-timing-function:ease;
  55. -webkit-box-sizing: content-box;
  56. -moz-box-sizing: content-box;
  57. box-sizing: content-box;
  58. }
  59. .swiper-free-mode > .swiper-wrapper {
  60. -webkit-transition-timing-function: ease-out;
  61. -moz-transition-timing-function: ease-out;
  62. -ms-transition-timing-function: ease-out;
  63. -o-transition-timing-function: ease-out;
  64. transition-timing-function: ease-out;
  65. margin: 0 auto;
  66. }
  67. .swiper-slide {
  68. float: left;
  69. -webkit-box-sizing: content-box;
  70. -moz-box-sizing: content-box;
  71. box-sizing: content-box;
  72. }
  73. /* IE10 Windows Phone 8 Fixes */
  74. .swiper-wp8-horizontal {
  75. -ms-touch-action: pan-y;
  76. }
  77. .swiper-wp8-vertical {
  78. -ms-touch-action: pan-x;
  79. }
  80. .pagination {
  81. position: absolute;
  82. z-index: 20;
  83. bottom:20px;
  84. width: 100%;
  85. text-align: center;
  86. }
  87. .swiper-pagination-switch {
  88. display: inline-block;
  89. width:10px;
  90. height:10px;
  91. border-radius:10px;
  92. background: #999999;
  93. margin: 0 5px;
  94. opacity: 0.8;
  95. cursor: pointer;
  96. }
  97. .swiper-active-switch {
  98. background: #1f4445;
  99. }
  100. .pagination2 {
  101. position: absolute;
  102. z-index: 20;
  103. top:50%;
  104. margin-top:-50px;
  105. right:10px;
  106. text-align: right;
  107. }
  108. .pagination2 .swiper-pagination-switch {
  109. display:block;
  110. width:15px;
  111. height:15px;
  112. border-radius:10px;
  113. background: #fff;
  114. margin: 10px;
  115. opacity: 0.8;
  116. cursor: pointer;
  117. }
  118. .pagination2 .swiper-active-switch {
  119. background: #1f4445;
  120. }
  121. /* ===============================================================
  122. Your custom styles, here you need to specify container's and slide's
  123. sizes, pagination, etc.
  124. ================================================================*/
  125. .swiper-container {
  126. /* Specify Swiper's Size: */
  127. /*width:200px;
  128. height: 100px;*/
  129. }
  130. .swiper-slide {
  131. /* Specify Slides's Size: */
  132. /*width: 100%;
  133. height: 100%;*/
  134. }
  135. .swiper-slide-active {
  136. /* Specific active slide styling: */
  137. }
  138. .swiper-slide-visible {
  139. /* Specific visible slide styling: */
  140. }
  141. /* ===============================================================
  142. Pagination Styles
  143. ================================================================*/
  144. .swiper-pagination-switch {
  145. /* Stylize pagination button: */
  146. }
  147. .swiper-active-switch {
  148. /* Specific active button style: */
  149. }
  150. .swiper-visible-switch {
  151. /* Specific visible button style: */
  152. }