pagination.less 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. @import url('../swiper-vars.less');
  2. :root {
  3. /*
  4. --swiper-pagination-color: var(--swiper-theme-color);
  5. --swiper-pagination-left: auto;
  6. --swiper-pagination-right: 8px;
  7. --swiper-pagination-bottom: 8px;
  8. --swiper-pagination-top: auto;
  9. --swiper-pagination-fraction-color: inherit;
  10. --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  11. --swiper-pagination-progressbar-size: 4px;
  12. --swiper-pagination-bullet-size: 8px;
  13. --swiper-pagination-bullet-width: 8px;
  14. --swiper-pagination-bullet-height: 8px;
  15. --swiper-pagination-bullet-border-radius: 50%;
  16. --swiper-pagination-bullet-inactive-color: #000;
  17. --swiper-pagination-bullet-inactive-opacity: 0.2;
  18. --swiper-pagination-bullet-opacity: 1;
  19. --swiper-pagination-bullet-horizontal-gap: 4px;
  20. --swiper-pagination-bullet-vertical-gap: 6px;
  21. */
  22. }
  23. .swiper-pagination {
  24. position: absolute;
  25. text-align: center;
  26. transition: 300ms opacity;
  27. transform: translate3d(0, 0, 0);
  28. z-index: 10;
  29. &.swiper-pagination-hidden {
  30. opacity: 0;
  31. }
  32. .swiper-pagination-disabled > &,
  33. &.swiper-pagination-disabled {
  34. display: none !important;
  35. }
  36. }
  37. /* Common Styles */
  38. .swiper-pagination-fraction,
  39. .swiper-pagination-custom,
  40. .swiper-horizontal > .swiper-pagination-bullets,
  41. .swiper-pagination-bullets.swiper-pagination-horizontal {
  42. bottom: var(--swiper-pagination-bottom, 8px);
  43. top: var(--swiper-pagination-top, auto);
  44. left: 0;
  45. width: 100%;
  46. }
  47. /* Bullets */
  48. .swiper-pagination-bullets-dynamic {
  49. overflow: hidden;
  50. font-size: 0;
  51. .swiper-pagination-bullet {
  52. transform: scale(0.33);
  53. position: relative;
  54. }
  55. .swiper-pagination-bullet-active {
  56. transform: scale(1);
  57. }
  58. .swiper-pagination-bullet-active-main {
  59. transform: scale(1);
  60. }
  61. .swiper-pagination-bullet-active-prev {
  62. transform: scale(0.66);
  63. }
  64. .swiper-pagination-bullet-active-prev-prev {
  65. transform: scale(0.33);
  66. }
  67. .swiper-pagination-bullet-active-next {
  68. transform: scale(0.66);
  69. }
  70. .swiper-pagination-bullet-active-next-next {
  71. transform: scale(0.33);
  72. }
  73. }
  74. .swiper-pagination-bullet {
  75. width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  76. height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  77. display: inline-block;
  78. border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  79. background: var(--swiper-pagination-bullet-inactive-color, #000);
  80. opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  81. button& {
  82. border: none;
  83. margin: 0;
  84. padding: 0;
  85. box-shadow: none;
  86. appearance: none;
  87. }
  88. .swiper-pagination-clickable & {
  89. cursor: pointer;
  90. }
  91. &:only-child {
  92. display: none !important;
  93. }
  94. }
  95. .swiper-pagination-bullet-active {
  96. opacity: var(--swiper-pagination-bullet-opacity, 1);
  97. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  98. }
  99. .swiper-vertical > .swiper-pagination-bullets,
  100. .swiper-pagination-vertical.swiper-pagination-bullets {
  101. right: var(--swiper-pagination-right, 8px);
  102. left: var(--swiper-pagination-left, auto);
  103. top: 50%;
  104. transform: translate3d(0px, -50%, 0);
  105. .swiper-pagination-bullet {
  106. margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  107. display: block;
  108. }
  109. &.swiper-pagination-bullets-dynamic {
  110. top: 50%;
  111. transform: translateY(-50%);
  112. width: 8px;
  113. .swiper-pagination-bullet {
  114. display: inline-block;
  115. transition:
  116. 200ms transform,
  117. 200ms top;
  118. }
  119. }
  120. }
  121. .swiper-horizontal > .swiper-pagination-bullets,
  122. .swiper-pagination-horizontal.swiper-pagination-bullets {
  123. .swiper-pagination-bullet {
  124. margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  125. }
  126. &.swiper-pagination-bullets-dynamic {
  127. left: 50%;
  128. transform: translateX(-50%);
  129. white-space: nowrap;
  130. .swiper-pagination-bullet {
  131. transition:
  132. 200ms transform,
  133. 200ms left;
  134. }
  135. }
  136. }
  137. .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  138. transition:
  139. 200ms transform,
  140. 200ms right;
  141. }
  142. /* Fraction */
  143. .swiper-pagination-fraction {
  144. color: var(--swiper-pagination-fraction-color, inherit);
  145. }
  146. /* Progress */
  147. .swiper-pagination-progressbar {
  148. background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  149. position: absolute;
  150. .swiper-pagination-progressbar-fill {
  151. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  152. position: absolute;
  153. left: 0;
  154. top: 0;
  155. width: 100%;
  156. height: 100%;
  157. transform: scale(0);
  158. transform-origin: left top;
  159. }
  160. .swiper-rtl & .swiper-pagination-progressbar-fill {
  161. transform-origin: right top;
  162. }
  163. .swiper-horizontal > &,
  164. &.swiper-pagination-horizontal,
  165. .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  166. &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  167. width: 100%;
  168. height: var(--swiper-pagination-progressbar-size, 4px);
  169. left: 0;
  170. top: 0;
  171. }
  172. .swiper-vertical > &,
  173. &.swiper-pagination-vertical,
  174. .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  175. &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  176. width: var(--swiper-pagination-progressbar-size, 4px);
  177. height: 100%;
  178. left: 0;
  179. top: 0;
  180. }
  181. }
  182. .swiper-pagination-lock {
  183. display: none;
  184. }