core.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. :root {
  2. --swiper-theme-color: #{$themeColor};
  3. }
  4. .swiper-container {
  5. margin-left: auto;
  6. margin-right: auto;
  7. position: relative;
  8. overflow: hidden;
  9. list-style: none;
  10. padding: 0;
  11. /* Fix of Webkit flickering */
  12. z-index:1;
  13. }
  14. .swiper-container-vertical > .swiper-wrapper {
  15. flex-direction: column;
  16. }
  17. .swiper-wrapper {
  18. position:relative;
  19. width: 100%;
  20. height: 100%;
  21. z-index: 1;
  22. display: flex;
  23. transition-property:transform;
  24. box-sizing: content-box;
  25. }
  26. .swiper-container-android .swiper-slide,
  27. .swiper-wrapper {
  28. transform:translate3d(0px,0,0);
  29. }
  30. .swiper-container-multirow > .swiper-wrapper {
  31. flex-wrap: wrap;
  32. }
  33. .swiper-container-multirow-column > .swiper-wrapper {
  34. flex-wrap: wrap;
  35. flex-direction: column;
  36. }
  37. .swiper-container-free-mode > .swiper-wrapper {
  38. transition-timing-function: ease-out;
  39. margin: 0 auto;
  40. }
  41. .swiper-slide {
  42. flex-shrink: 0;
  43. width: 100%;
  44. height: 100%;
  45. position: relative;
  46. transition-property: transform;
  47. }
  48. .swiper-slide-invisible-blank {
  49. visibility: hidden;
  50. }
  51. /* Auto Height */
  52. .swiper-container-autoheight {
  53. &, .swiper-slide {
  54. height: auto;
  55. }
  56. .swiper-wrapper {
  57. align-items: flex-start;
  58. transition-property: transform, height;
  59. }
  60. }
  61. /* 3D Effects */
  62. .swiper-container-3d {
  63. perspective: 1200px;
  64. .swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
  65. transform-style: preserve-3d;
  66. }
  67. .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
  68. position: absolute;
  69. left: 0;
  70. top: 0;
  71. width: 100%;
  72. height: 100%;
  73. pointer-events: none;
  74. z-index: 10;
  75. }
  76. .swiper-slide-shadow-left {
  77. background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0));
  78. }
  79. .swiper-slide-shadow-right {
  80. background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
  81. }
  82. .swiper-slide-shadow-top {
  83. background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
  84. }
  85. .swiper-slide-shadow-bottom {
  86. background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  87. }
  88. }
  89. /* CSS Mode */
  90. .swiper-container-css-mode {
  91. > .swiper-wrapper {
  92. overflow: auto;
  93. scrollbar-width: none; /* For Firefox */
  94. -ms-overflow-style: none; /* For Internet Explorer and Edge */
  95. &::-webkit-scrollbar {
  96. display: none;
  97. }
  98. }
  99. > .swiper-wrapper > .swiper-slide {
  100. scroll-snap-align: start start;
  101. }
  102. }
  103. .swiper-container-horizontal.swiper-container-css-mode {
  104. > .swiper-wrapper {
  105. scroll-snap-type: x mandatory;
  106. }
  107. }
  108. .swiper-container-vertical.swiper-container-css-mode {
  109. > .swiper-wrapper {
  110. scroll-snap-type: y mandatory;
  111. }
  112. }