navigation.css 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. :root {
  2. --swiper-navigation-size: 44px;
  3. /*
  4. --swiper-navigation-top-offset: 50%;
  5. --swiper-navigation-sides-offset: 10px;
  6. --swiper-navigation-color: var(--swiper-theme-color);
  7. */
  8. }
  9. .swiper-button-prev,
  10. .swiper-button-next {
  11. position: absolute;
  12. top: var(--swiper-navigation-top-offset, 50%);
  13. width: calc(var(--swiper-navigation-size) / 44 * 27);
  14. height: var(--swiper-navigation-size);
  15. margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  16. z-index: 10;
  17. cursor: pointer;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. color: var(--swiper-navigation-color, var(--swiper-theme-color));
  22. }
  23. .swiper-button-prev.swiper-button-disabled,
  24. .swiper-button-next.swiper-button-disabled {
  25. opacity: 0.35;
  26. cursor: auto;
  27. pointer-events: none;
  28. }
  29. .swiper-button-prev.swiper-button-hidden,
  30. .swiper-button-next.swiper-button-hidden {
  31. opacity: 0;
  32. cursor: auto;
  33. pointer-events: none;
  34. }
  35. .swiper-navigation-disabled .swiper-button-prev,
  36. .swiper-navigation-disabled .swiper-button-next {
  37. display: none !important;
  38. }
  39. .swiper-button-prev svg,
  40. .swiper-button-next svg {
  41. width: 100%;
  42. height: 100%;
  43. object-fit: contain;
  44. transform-origin: center;
  45. }
  46. .swiper-rtl .swiper-button-prev svg,
  47. .swiper-rtl .swiper-button-next svg {
  48. transform: rotate(180deg);
  49. }
  50. .swiper-button-prev,
  51. .swiper-rtl .swiper-button-next {
  52. left: var(--swiper-navigation-sides-offset, 10px);
  53. right: auto;
  54. }
  55. .swiper-button-next,
  56. .swiper-rtl .swiper-button-prev {
  57. right: var(--swiper-navigation-sides-offset, 10px);
  58. left: auto;
  59. }
  60. .swiper-button-lock {
  61. display: none;
  62. }
  63. /* Navigation font start */
  64. .swiper-button-prev:after,
  65. .swiper-button-next:after {
  66. font-family: swiper-icons;
  67. font-size: var(--swiper-navigation-size);
  68. text-transform: none !important;
  69. letter-spacing: 0;
  70. font-variant: initial;
  71. line-height: 1;
  72. }
  73. .swiper-button-prev:after,
  74. .swiper-rtl .swiper-button-next:after {
  75. content: 'prev';
  76. }
  77. .swiper-button-next,
  78. .swiper-rtl .swiper-button-prev {
  79. right: var(--swiper-navigation-sides-offset, 10px);
  80. left: auto;
  81. }
  82. .swiper-button-next:after,
  83. .swiper-rtl .swiper-button-prev:after {
  84. content: 'next';
  85. }
  86. /* Navigation font end */