pagination.less 3.4 KB

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