pagination.scss 4.4 KB

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